/* Tokens */
/*
 * TDS Custom Properties
 * To add a property, declare the css variable below and run a build.
 * This will provide the variable for consumers of both css and js
 *
 * Format:
 * --tds-{property-name}: {base-value};
 * --tds-{property-name}--{modifier}: {value};
 */
:root,
.tds-component-preview {
  /* Primitive/Abstract Props */
  --tds-bezier: cubic-bezier(0.5, 0, 0, 0.75);

  /* Sizes */
  --tds-size: 8px;
  --tds-size--10x: 80px;
  --tds-size--11x: 88px;
  --tds-size--12x: 96px;
  --tds-size--13x: 104px;
  --tds-size--1x: 8px;
  --tds-size--2x: 16px;
  --tds-size--3x: 24px;
  --tds-size--4x: 32px;
  --tds-size--5x: 40px;
  --tds-size--6x: 48px;
  --tds-size--7x: 56px;
  --tds-size--8x: 64px;
  --tds-size--9x: 72px;
  --tds-size--half: 4px;

  /* Colors */
  --tds-color--black: #000; /* hsl(0, 0%, 0%); */
  --tds-color--blue10: #2e4994; /* hsl(224, 53%, 38%); */
  --tds-color--blue20: #3457b1; /* hsl(223, 55%, 45%); */
  --tds-color--blue30: #3e6ae1; /* hsl(224, 73%, 56%); */
  --tds-color--green: #12bb00; /* hsl(114, 100%, 37%); */
  --tds-color--grey10: #171a20; /* hsl(220, 16%, 11%); */
  --tds-color--grey15: #222; /* hsl(0, 0%, 13%); */
  --tds-color--grey20: #393c41; /* hsl(218, 7%, 24%); */
  --tds-color--grey25: #444; /* hsl(0, 0%, 27%); */
  --tds-color--grey30: #5c5e62; /* hsl(220, 3%, 37%); */
  --tds-color--grey35: #8e8e8e; /* hsl(0, 0%, 56%); */
  --tds-color--grey40: #a2a3a5; /* hsl(220, 2%, 64%); */
  --tds-color--grey45: #bbb; /* hsl(0, 0%, 73%); */
  --tds-color--grey50: #d0d1d2; /* hsl(210, 2%, 82%); */
  --tds-color--grey60: #e2e3e3; /* hsl(180, 2%, 89%); */
  --tds-color--grey65: #eee; /* hsl(0, 0%, 93%); */
  --tds-color--grey70: #f4f4f4; /* hsl(0, 0%, 96%); */
  --tds-color--red10: #b74134; /* hsl(6, 56%, 46%); */
  --tds-color--red20: #ed4e3b; /* hsl(6, 83%, 58%); */
  --tds-color--white: #fff; /* hsl(0, 0%, 100%); */
  --tds-color--yellow: #fbb01b; /* hsl(40, 97%, 55%); */

  /* font tokens */
  --tds-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tds-font-family--arabic: 'Noto Sans Arabic';
  --tds-font-family--chinese-hk: 'PingFang HK', 'Microsoft YaHei';
  --tds-font-family--chinese-simplified: 'PingFang SC', 'Microsoft YaHei';
  --tds-font-family--chinese-traditional: 'PingFang TC', 'Microsoft YaHei';
  --tds-font-family--combined: 'Gotham SSm', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tds-font-family--hebrew: 'Noto Sans Hebrew';
  --tds-font-family--japanese: 'AXIS Font Japanese W55', 'Hiragino Sans';
  --tds-font-family--korean: 'FB New Gothic';
  --tds-font-family--latin: 'Gotham SSm';
  --tds-font-family--monospace: 'Fira Code', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --tds-font-family--thai: 'Noto Sans Thai';
  --tds-font-weight--bold: 700;
  --tds-font-weight--book: 400;
  --tds-font-weight--light: 300;
  --tds-font-weight--medium: 500;
  --tds-font-weight--xlight: 200;

  /* TODO: Refactor these to `blur(16px)` etc */
  --tds-blur--button: 16px;
  --tds-blur--large: 8px;
  --tds-blur--small: 4px;

  /* Base Props */
  --tds-border-radius: 4px;
  --tds-border-radius--card: 16px;
  --tds-border-radius--card--dense: 8px;
  --tds-border-radius--circle: 100%;
  --tds-border-radius--form-item: 20px;
  --tds-border-radius--pill: 32px;
  --tds-border-style: solid;
  --tds-border-width--hairline: 1px;
  --tds-border-width--large: 3px;
  --tds-border-width--medium: 2px;
  --tds-border-width--small: 1px;
  --tds-box-shadow--large: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
  --tds-box-shadow--large-reverse: 0 -8px 16px 0 rgba(0, 0, 0, 0.16);
  --tds-box-shadow--medium: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
  --tds-box-shadow--off: 0 0 0 0 rgba(0, 0, 0, 0);
  --tds-box-shadow--small: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
  --tds-font-size--10: 10px;
  --tds-font-size--20: 12px;
  --tds-font-size--30: 14px;
  --tds-font-size--40: 17px;
  --tds-font-size--50: 20px;
  --tds-font-size--55: 23px;
  --tds-font-size--60: 24px;
  --tds-font-size--70: 28px;
  --tds-font-size--75: 34px;
  --tds-font-size--80: 40px;
  --tds-height--pill: 40px;
  --tds-line-height--10: 18px;
  --tds-line-height--20: 20px;
  --tds-line-height--30: 21px;
  --tds-line-height--40: 23px;
  --tds-line-height--50: 24px;
  --tds-line-height--60: 28px;
  --tds-line-height--70: 36px;
  --tds-line-height--75: 45px;
  --tds-line-height--80: 48px;
  --tds-line-height--unitless: 1.414;
  --tds-opacity--100: 1;
  --tds-opacity--30: 0.3;
  --tds-opacity--50: 0.5;
  --tds-opacity--70: 0.7;
  --tds-opacity--transparent: 0;
  --tds-padding--card: 24px;
  --tds-padding--card--dense: 16px;
  --tds-padding-block--pill: 10px;
  --tds-padding-inline--pill: 20px;
}
@media (min-resolution: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root,
  .tds-component-preview {
    --tds-border-width--hairline: 0.5px;
  }
}
/* Base */
/* stylelint-disable property-no-vendor-prefix, no-duplicate-selectors, no-descending-specificity, font-family-no-duplicate-names */
:root,
.tds-component-preview {
  --tds-base-font_family: var(--tds-font-family--combined);
  --tds-base-font_size: var(--tds-font-size--30);
  --tds-base-line_height: var(--tds-line-height--30);
}
/* Defining "system" font stack used as fallback in --tds-font-family--combined variables */
@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src:
    local('.SFNSText-Light'),
    local('.HelveticaNeueDeskInterface-Light'),
    local('.LucidaGrandeUI'),
    local('Ubuntu Light'),
    local('Segoe UI Light'),
    local('Roboto-Light'),
    local('DroidSans'),
    local('Tahoma');
}
* {
  /* Set Box sizing at the element level */
  box-sizing: border-box;
  scroll-behavior: smooth;
}
html,
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
figure,
figcaption {
  margin: 0;
  padding: 0;
}
/* Document
   ========================================================================== */
/**
 * Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  -webkit-text-size-adjust: 100%;
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
html {
  block-size: -webkit-fill-available;
}
body {
  margin: 0;
  min-block-size: 100vh;

  /* mobile viewport bug fix */
  min-block-size: -webkit-fill-available;
}
/* Text
   ========================================================================== */
p,
li {
  max-inline-size: 75ch;
}
li {
  margin: 0;
}
p {
  font-size: var(--tds-font-size--30);
  line-height: var(--tds-line-height--30);
}
p + p {
  -webkit-padding-before: 14px;
          padding-block-start: 14px;
}
small {
  font-size: var(--tds-font-size--20);
  line-height: var(--tds-line-height--10);
}
html,
body {
  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
  font-size: var(--tds-base-font_size);
  font-weight: 400;
  line-height: var(--tds-base-line_height);
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
small {
  display: block;
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
small {
  line-height: var(--tds-line-height--30);
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  background: var(--tds-color--grey50, #d0d1d2);
  block-size: 1px;
  border: none;
  box-sizing: border-box; /* 1 */
  overflow: visible; /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  -webkit-border-after: none;
          border-block-end: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: 500;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit;
  line-height: inherit; /* 1 */
  margin: 0; /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-inline-size: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  block-size: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* Interactive
   ========================================================================== */
/* Remove animations and movemenets globally for users that have turned them off via browser setting */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    -webkit-animation: none !important;
            animation: none !important;
  }
}
/* Also remove transitions when user is using the keyboard to navigate */
.tds--indicate-focus *,
.tds--indicate-focus *::before,
.tds--indicate-focus *::after {
  transition: none !important;
}
*:focus-visible,
*:focus-visible::before,
*:focus-visible::after {
  transition: none !important;
}
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Disabled State
   ========================================================================== */
/* Reduce visual prominence */
[disabled],
[disabled] ~ [class*='tds-form-label'],
.tds--disabled {
  cursor: not-allowed;
  opacity: var(--tds-opacity--50);
}
.tds--disabled [disabled] {
  opacity: inherit;
}
/* Prevent interactions */
[disabled] *,
[disabled]::before,
[disabled]::after,
[disabled] ~ [class*='tds-form-label'],
[disabled] ~ [class*='tds-form-label']::before,
[disabled] ~ [class*='tds-form-label']::after,
.tds--disabled * {
  pointer-events: none;
}
/* Colorschemes
   ========================================================================== */
/* Scrim: (in a theater) a piece of gauze cloth that appears opaque
 until lit from behind, used as a screen or backdrop.

 In TDS Scrims represent a specific background color applied to a section,
 similar to a sub-theme.
 --------------------------------------------------------------- */
[class*='tds-scrim--'] {
  /* Deliberately leave the default background undefined, so that components can specify a fallback */
  background-color: var(--tds-scrim--background);
}
/* Light (Default) */
:root,
.tds-colorscheme--light,
.tds-scrim--white,
.tds-scrim--light {
  --tds-color--error: var(--tds-color--red10);
  --tds-color--hairline: var(--tds-color--grey50);
  --tds-color--inverse: var(--tds-color--white);
  --tds-color--primary: var(--tds-color--blue30);
  --tds-color--primary-highlight: var(--tds-color--blue20);
  --tds-color--rgb-shade: 0, 0, 0;
  --tds-color--rgb-shade--inverse: 255, 255, 255;
  --tds-color--scrim--semitransparent: rgba(255, 255, 255, 0.7);
  --tds-color--secondary: var(--tds-color--grey10);
  --tds-color--secondary-accent: var(--tds-color--grey50);
  --tds-color--secondary-highlight: var(--tds-color--black);
  --tds-color--tertiary: var(--tds-color--grey70);
  --tds-color--tertiary-highlight: var(--tds-color--grey65);

  /* Specific components */
  --tds-caption--color: var(--tds-color--grey30);
  --tds-dialog--background-color: var(--tds-color--white);
  --tds-heading--color: var(--tds-color--secondary);
  --tds-pill--blur-color: hsla(0, 0%, 0%, 0.05);
  --tds-text--color: var(--tds-color--grey20);
  --tds-text--color--light: var(--tds-color--grey30);
  --tds-text--color--placeholder: var(--tds-color--grey40);
  --tds-text--color--primary: var(--tds-color--blue30);
  --tds-toggle--background-color: rgba(150, 150, 150, 0.1);
  --tds-toggle--fill-color: var(--tds-color--white);

  /* Text Contrast Modifiers */
  --tds-text--contrast-high: var(--tds-color--grey10);
  --tds-text--contrast-low: var(--tds-color--grey30);
  --tds-text--contrast-medium: var(--tds-color--grey20);

  /* Code Snippets */
  --tds-code-bg-color: var(--tds-color--grey70);
  --tds-code-border-color: var(--tds-color--grey60);
  --tds-code-color: var(--tds-text--color);

  /* Focus indication has to meet 3:1 contrast ratio, middle grey works for both white and black backgrounds */
  --tds-outline--focus: 2px dashed var(--tds-color--grey35);

  /* Form Elements */
  --tds-background-image--check: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='hsl(218, 7%, 24%)' d='M6.592 11.58a.748.748 0 0 1-.53-.22L3.22 8.517a.75.75 0 1 1 1.06-1.061l2.312 2.312L11.72 4.64a.75.75 0 1 1 1.06 1.06l-5.658 5.66a.748.748 0 0 1-.53.22z' /></svg>");
  --tds-background-image--minus: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='hsl(218, 7%, 24%)' d='M13 8a.75.75 0 0 1-.75.75h-8.5a.75.75 0 0 1 0-1.5h8.5A.75.75 0 0 1 13 8z' /></svg>");

  color: var(--tds-text--color);
}
.tds-scrim--white {
  --tds-dialog--background-color: var(--tds-color--white);
  --tds-scrim--background: var(--tds-color--white);
}
/* Primary links on light scrims do NOT pass contrast ratio, but
   with a slight tweak to the color, it does. The long-term solution
   is to find a color that works for white, light, black scrim colors.

   NOTE: `tds-text--color--primary`
 */
.tds-scrim--light {
  --tds-color--tertiary: var(--tds-color--white);
  --tds-scrim--background: var(--tds-color--grey70);
  --tds-text--color--primary: #3865e0;

  /* Code Snippets */
  --tds-code-bg-color: var(--tds-color--grey60);
  --tds-code-border-color: var(--tds-color--grey50);
  --tds-code-color: var(--tds-text--color);

  /* grey30 is only a 2.97:1 contrast ratio with light scrim */
  --tds-outline--focus: 2px dashed var(--tds-color--grey30);
}
/* Light Scrim override for dialogs and elevated elements that have white backgrounds
 * Note that this can't be placed on the component itself, as some of the components rely on
 * --tds-color--tertiary for their own background
*/
.tds-scrim--light .tds-tooltip > *,
.tds-scrim--light .tds-modal > *,
.tds-scrim--light .tds-card > * {
  --tds-code-bg-color: var(--tds-color--grey70);
  --tds-code-border-color: var(--tds-color--grey60);
  --tds-color--tertiary: var(--tds-color--grey70);
}
/* Dark */
.tds-colorscheme--dark,
.tds-scrim--black {
  --tds-color--error: var(--tds-color--red20);
  --tds-color--hairline: var(--tds-color--grey35);
  --tds-color--inverse: var(--tds-color--black);
  --tds-color--rgb-shade: 255, 255, 255;
  --tds-color--rgb-shade--inverse: 0, 0, 0;
  --tds-color--scrim--semitransparent: rgba(0, 0, 0, 0.7);
  --tds-color--secondary: var(--tds-color--grey70);
  --tds-color--secondary-accent: var(--tds-color--grey35);
  --tds-color--secondary-highlight: var(--tds-color--white);
  --tds-color--tertiary: var(--tds-color--grey20);
  --tds-color--tertiary-highlight: var(--tds-color--grey30);

  /* Specific components */
  --tds-caption--color: var(--tds-color--grey40);
  --tds-dialog--background-color: var(--tds-color--grey15);
  --tds-heading--color: var(--tds-color--white);
  --tds-pill--blur-color: hsla(0, 0%, 100%, 0.2);
  --tds-text--color: var(--tds-color--grey60);
  --tds-text--color--light: var(--tds-color--grey50);
  --tds-text--color--primary: #3368ff;
  --tds-toggle--background-color: rgba(255, 255, 255, 0.2);
  --tds-toggle--fill-color: var(--tds-color--grey30);

  /* Text Contrast Modifiers */
  --tds-text--contrast-high: var(--tds-color--white);
  --tds-text--contrast-low: var(--tds-color--grey40);
  --tds-text--contrast-medium: var(--tds-color--grey60);

  /* Form Elements */
  --tds-background-image--check: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='hsl(180, 2%, 89%)' d='M6.592 11.58a.748.748 0 0 1-.53-.22L3.22 8.517a.75.75 0 1 1 1.06-1.061l2.312 2.312L11.72 4.64a.75.75 0 1 1 1.06 1.06l-5.658 5.66a.748.748 0 0 1-.53.22z' /></svg>");
  --tds-background-image--minus: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='hsl(180, 2%, 89%)' d='M13 8a.75.75 0 0 1-.75.75h-8.5a.75.75 0 0 1 0-1.5h8.5A.75.75 0 0 1 13 8z' /></svg>");

  /* Code Snippets */
  --tds-code-bg-color: var(--tds-color--grey10);
  --tds-code-border-color: var(--tds-color--grey15);
  --tds-code-color: var(--tds-text--color);

  color: var(--tds-text--color);
}
.tds-scrim--black {
  --tds-scrim--background: var(--tds-color--black);
}
/*
Copyright (C) Hoefler & Co.
This software is the property of Hoefler & Co. (H&Co).
Your right to access and use this software is subject to the
applicable License Agreement, or Terms of Service, that exists
between you and H&Co. If no such agreement exists, you may not
access or use this software for any purpose.
This software may only be hosted at the locations specified in
the applicable License Agreement or Terms of Service, and only
for the purposes expressly set forth therein. You may not copy,
modify, convert, create derivative works from or distribute this
software in any way, or make it accessible to any third party,
without first obtaining the written permission of H&Co.
For more information, please visit us at http://typography.com.
*/
/* Latin:
 * For localized stacks, the font-weight property should match the Gotham declaraction,
 * while the actual glyph set should be adjusted for the specific font.
 */
/* Bold */
@font-face {
  font-family: 'Gotham SSm';
  font-weight: 700;
  font-display: swap;
  font-style: normal;
  src:
    url('/tds-fonts/3.x/woff2/GothamSSm-Bold_Web.woff2')
    format('woff2');
}
/* Medium */
@font-face {
  font-family: 'Gotham SSm';
  font-weight: 500;
  font-display: swap;
  font-style: normal;
  src:
    url('/tds-fonts/3.x/woff2/GothamSSm-Medium_Web.woff2')
    format('woff2');
}
/* Book */
@font-face {
  font-family: 'Gotham SSm';
  font-weight: 400;
  font-display: swap;
  font-style: normal;
  src:
    url('/tds-fonts/3.x/woff2/GothamSSm-Book_Web.woff2')
    format('woff2');
}
/* Light */
@font-face {
  font-family: 'Gotham SSm';
  font-weight: 300;
  font-display: swap;
  font-style: normal;
  src:
    url('/tds-fonts/3.x/woff2/GothamSSm-Light_Web.woff2')
    format('woff2');
}
/* Extra Light */
@font-face {
  font-family: 'Gotham SSm';
  font-weight: 200;
  font-display: swap;
  font-style: normal;
  src:
    url('/tds-fonts/3.x/woff2/GothamSSm-XLight_Web.woff2')
    format('woff2');
}
/* Chinese (Simplified, Traditional, Hong Kong):
 * Requested by China business teams:
 * Google Fonts don't load in CN, PingFang comes installed on majority of local systems
 */
@font-face {
  font-family: 'PingFang SC';
  font-weight: 500;
  src: local('PingFang SC Semibold');
}
@font-face {
  font-family: 'PingFang SC';
  font-weight: 400;
  src: local('PingFang SC Regular');
}
@font-face {
  font-family: 'PingFang TC';
  font-weight: 500;
  src: local('PingFang TC Semibold');
}
@font-face {
  font-family: 'PingFang TC';
  font-weight: 400;
  src: local('PingFang TC Regular');
}
@font-face {
  font-family: 'PingFang HK';
  font-weight: 400;
  src: local('PingFang HK Regular');
}
@font-face {
  font-family: 'PingFang HK';
  font-weight: 500;
  src: local('PingFang HK Semibold');
}
/* Arabic:
 * Reference: https: //fonts.google.com/noto/specimen/Noto+Sans+Arabic
 * Declaration Source: https://fonts.googleapis.com/css?family=Noto+Sans+Arabic:wght@400;500
 */
/* Noto Sans Arabic "Medium" */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  src: url('https://fonts.gstatic.com/s/notosansarabic/v10/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4rqxzLI.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Sans Arabic "Book" */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url('https://fonts.gstatic.com/s/notosansarabic/v10/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4rqxzLI.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Hebrew
 * Reference: https://fonts.google.com/noto/specimen/Noto+Sans+Hebrew
 * Declaration source: https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400;500
 */
/* Noto Sans Hebrew "Medium" */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  src: url('https://fonts.gstatic.com/s/notosanshebrew/v35/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzWNf72.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Sans Hebrew "Book" */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url('https://fonts.gstatic.com/s/notosanshebrew/v35/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzWNf72.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Thai
 * Reference: https://fonts.google.com/noto/specimen/Noto+Sans+Thai
 * Declaration source: https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500
 */
/* Noto Sans Thai "Medium" */
@font-face {
  font-family: 'Noto Sans Thai';
  font-display: swap;
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  src: url('https://fonts.gstatic.com/s/notosansthai/v20/iJWQBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcdfKI2hTWsb-P2c.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* Noto Sans Thai "Book" */
@font-face {
  font-family: 'Noto Sans Thai';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url('https://fonts.gstatic.com/s/notosansthai/v20/iJWQBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcdfKI2hTWsb-P2c.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* Themes */
/* -- Enterprise Theme Overrides
----------------------------------------------------------------------------- */
.tds-theme--enterprise {
  --tds-border-radius--form-item: 16px;
  --tds-height--pill: 32px;
  --tds-padding-block--pill: 8px;
  --tds-padding-inline--pill: 15px;

  /* Text Inputs/Forms  */
  --tds-form-item-margin_bottom: 18px;
  --tds-label-descriptor-margin_left: 6px;
  --tds-size: 9px;
}
/* -- Marketing Theme Overrides
----------------------------------------------------------------------------- */
.tds-theme--marketing,
.tds-theme--marketing.tds-colorscheme--light,
.tds-theme--marketing .tds-colorscheme--light,
.tds-colorscheme--light .tds-theme--marketing,
.tds-theme--marketing.tds-scrim--white,
.tds-theme--marketing .tds-scrim--white,
.tds-scrim--white .tds-theme--marketing,
.tds-theme--marketing.tds-scrim--light,
.tds-theme--marketing .tds-scrim--light,
.tds-scrim--light .tds-theme--marketing {
  --tds-color--primary: var(--tds-color--grey10);
  --tds-color--primary-highlight: var(--tds-color--grey20);
}
.tds-theme--marketing.tds-colorscheme--dark,
.tds-theme--marketing .tds-colorscheme--dark,
.tds-colorscheme--dark .tds-theme--marketing,
.tds-theme--marketing.tds-scrim--black,
.tds-theme--marketing .tds-scrim--black,
.tds-scrim--black .tds-theme--marketing {
  --tds-color--primary: var(--tds-color--white);
  --tds-color--primary-highlight: var(--tds-color--grey60);
}
:is(.tds-colorscheme--dark, .tds-scrim--black) .tds-theme--marketing .tds-date-picker,
.tds-theme--marketing :is(.tds-colorscheme--dark, .tds-scrim--black) .tds-date-picker,
.tds-theme--marketing:is(.tds-colorscheme--dark, .tds-scrim--black) .tds-date-picker {
  --tds-date-selected--color: var(--tds-color--grey20);
}
/**
 * User Preference for Dark Mode
 * **** PROTOTYPE CODE ****
 *
 * Please note, Dark mode support is provided as-is, no-guarantees,
 * and is subject to unannounced changes. Use at your own risk.
 */
@media (prefers-color-scheme: dark) {
  .tds--supports-darkmode.tds-theme--marketing,
  .tds--supports-darkmode.tds-theme--marketing.tds-colorscheme--light,
  .tds--supports-darkmode.tds-theme--marketing .tds-colorscheme--light,
  .tds--supports-darkmode.tds-theme--marketing.tds-scrim--white,
  .tds--supports-darkmode.tds-theme--marketing .tds-scrim--white,
  .tds--supports-darkmode.tds-theme--marketing.tds-scrim--light,
  .tds--supports-darkmode.tds-theme--marketing .tds-scrim--light,
  .tds--supports-darkmode.tds-colorscheme--light .tds-theme--marketing {
    --tds-color--primary: var(--tds-color--white);
    --tds-color--primary-highlight: var(--tds-color--grey70);
  }
}
/* -- Replicant Theme Overrides
   -- Alternate appearance for TDS (for Cybertruck-related content)
   -- Defaults to a dark colorscheme, but can be reversed
----------------------------------------------------------------------------- */
.tds-theme--replicant {
  /* Glow Effect */
  --tds-glow--bright: drop-shadow(0 0 var(--tds-size--2x) rgba(var(--tds-color--rgb-shade), 0.5));
  --tds-glow--medium: drop-shadow(0 0 var(--tds-size--1x) rgba(var(--tds-color--rgb-shade), 0.33));
  --tds-glow--off: drop-shadow(0 0 0 rgba(var(--tds-color--rgb-shade), 0.33));

  /* solid background */
  --tds-notch: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);

  /* 4px border */
  --tds-notch--outline:
    polygon(
      0 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%,
      0 4px,
      4px 4px,
      4px calc(100% - 4px),
      calc(100% - 12px) calc(100% - 4px),
      calc(100% - 4px) calc(100% - 12px),
      calc(100% - 4px) 4px,
      0 4px
    );

  /* 1px border */
  --tds-notch--outline-thin:
    polygon(
      0 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%,
      0 1.5px,
      1.5px 1.5px,
      1.5px calc(100% - 1.5px),
      calc(100% - 11.5px) calc(100% - 1.5px),
      calc(100% - 1.5px) calc(100% - 11.5px),
      calc(100% - 1.5px) 1.5px,
      0 1.5px
    );

  /* Shapes */
  --tds-border-radius: 0;
  --tds-border-radius--card: 0;
  --tds-border-radius--card--dense: 0;
  --tds-border-radius--pill: 0;
  --tds-padding-block--pill: 12px;
  --tds-padding-inline--pill: 16px;

  /* Toggles */
  --transition-off:
    color 0.5s ease,
    background 0.5s ease,
    border-color 0.5s ease,
    opacity 1s ease,
    transform 1s var(--tds-bezier) 0s;
  --transition-on:
    color 0.5s ease,
    background 0.5s ease,
    border-color 0.5s ease,
    opacity 1s ease,
    transform 1s var(--tds-bezier) 0.48s;

  /* Default Styles */
  font-size: var(--tds-font-size--20);
  line-height: var(--tds-line-height--50);
}
/* Scrims should have no background in Replicant environments */
.tds-theme--replicant [class*='tds-scrim--']:not(.tds-scrim--blur) {
  /* TODO: This rule should be set by the body tag, investigate why it's not */
  color: var(--tds-text--color);
}
/*
  TODO Document this no-bg solution for the likes of Ricky P. and into the Migration Docs
*/
.tds-theme--replicant--has_img [class*='tds-scrim--']:not(.tds-scrim--blur) {
  --tds-scrim--background: transparent;
}
/**
 * Replicant modifications to the Light/Dark colorschemes
 * - Covers several use-cases:
 * 1. Light/Dark set at root, Replicant is a section of the page
 * 2. Replicant set at root, Light/Dark for different sections of the page
 * 3. Replicant set at root, Dark set at root or close to it, Light for a section to override it
 * -- NOTE: flipflopping overrides handled for us by customProps
 * 4. Replicant and Light/Dark set at the same level to specify a specific version
 * 5. White/Light/Black scrim used instead of colorscheme ???
*/
/**
 * User Preference for Dark Mode
 * **** PROTOTYPE CODE ****
 *
 * Please note, Dark mode support is provided as-is, no-guarantees,
 * and is subject to unannounced changes. Use at your own risk.
 */
@media (prefers-color-scheme: dark) {
  .tds-theme--replicant.tds--supports-darkmode:not([class*='tds-colorscheme--']) {
    /* Colors */
    --tds-color--primary: var(--tds-color--white);
    --tds-color--primary-highlight: var(--tds-color--white);
    --tds-color--secondary: var(--tds-color--white);
    --tds-color--tertiary: transparent;
    --tds-dialog--background-color: var(--tds-color--black);

    /* Body copy */
    --tds-text--color: var(--tds-color--grey45);
    --tds-text--color--light: var(--tds-color--grey35);
  }

  .tds-theme--replicant.tds--supports-darkmode:not([class*='tds-scrim--']):not([class*='tds-colorscheme--']) {
    background-color: var(--tds-color--black);
  }
}
/* Light colorscheme should also be the default */
.tds-theme--replicant,
.tds-theme--replicant .tds-scrim--white,
.tds-theme--replicant .tds-scrim--light,
.tds-scrim--white .tds-theme--replicant,
.tds-scrim--light .tds-theme--replicant,
.tds-theme--replicant.tds-scrim--white,
.tds-theme--replicant.tds-scrim--light,
.tds-colorscheme--light .tds-theme--replicant,
.tds-theme--replicant.tds-colorscheme--light,
.tds-theme--replicant .tds-colorscheme--light {
  /* Colors */
  --tds-color--primary: var(--tds-color--black);
  --tds-color--primary-highlight: var(--tds-color--black);
  --tds-color--secondary: var(--tds-color--black);
  --tds-color--tertiary: transparent;
}
.tds-colorscheme--dark .tds-theme--replicant,
.tds-theme--replicant .tds-scrim--black,
.tds-scrim--black .tds-theme--replicant,
.tds-theme--replicant.tds-scrim--black,
.tds-theme--replicant.tds-colorscheme--dark,
.tds-theme--replicant .tds-colorscheme--dark {
  /* Colors */
  --tds-color--primary: var(--tds-color--white);
  --tds-color--primary-highlight: var(--tds-color--white);
  --tds-color--secondary: var(--tds-color--white);
  --tds-color--tertiary: transparent;
  --tds-dialog--background-color: var(--tds-color--black);

  /* Body copy */
  --tds-text--color: var(--tds-color--grey45);
  --tds-text--color--light: var(--tds-color--grey35);
  --tds-text--color--placeholder: var(--tds-color--grey45);
}
@-webkit-keyframes tds-flicker-on--soft {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 0.5;
  }

  16% {
    opacity: 0;
  }

  24% {
    opacity: 0.5;
  }

  48% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes tds-flicker-on--soft {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 0.5;
  }

  16% {
    opacity: 0;
  }

  24% {
    opacity: 0.5;
  }

  48% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes tds-flicker--soft {
  0% {
    opacity: 1;
  }

  8% {
    opacity: 0.75;
  }

  16% {
    opacity: 1;
  }

  24% {
    opacity: 0.75;
  }

  32% {
    opacity: 1;
  }

  40% {
    opacity: 0.75;
  }

  48% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}
@keyframes tds-flicker--soft {
  0% {
    opacity: 1;
  }

  8% {
    opacity: 0.75;
  }

  16% {
    opacity: 1;
  }

  24% {
    opacity: 0.75;
  }

  32% {
    opacity: 1;
  }

  40% {
    opacity: 0.75;
  }

  48% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}
:is(.tds-colorscheme--dark, .tds-scrim--black) .tds-theme--replicant .tds-date-picker,
.tds-theme--replicant :is(.tds-colorscheme--dark, .tds-scrim--black) .tds-date-picker,
.tds-theme--replicant:is(.tds-colorscheme--dark, .tds-scrim--black) .tds-date-picker {
  --tds-date-selected--color: var(--tds-color--grey20);
}
/* RR Theme Overrides
 * Default theme in v7, provided as a specialized theme in v5 and v6
 * Start with updating tokens
----------------------------------------------------------------------------- */
.tds-theme--v7 {
  --tds-border-radius--card: var(--tds-size--half);
  --tds-border-radius--card--dense: var(--tds-size--half);
  --tds-border-radius--form-item: var(--tds-size--half);
  --tds-border-radius--pill: var(--tds-size--half);
}
/* @import url('themes/factory.css'); */
/* Components */
/* TDS Banner
 * -- Intended for use with tds--padding and a scrim */
:root,
.tds-component-preview {
  --tds-banner--padding: var(--tds-size--2x);
}
.tds-banner {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  background-color: var(--tds-scrim--background, rgba(128, 128, 128, 0.125));
  inline-size: 100%;
  padding: var(--tds-banner--padding);
  text-align: center;
}
:root,
.tds-component-preview {
  --tds-btn--font-size: var(--tds-font-size--20);
}
/* In Arabic, the font in the button is too small. */
[lang='ar-AE'],
html[lang='ar-AE'],
[lang='ar-AE'] body {
  --tds-btn--font-size: var(--tds-font-size--30);
}
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  color: inherit;
  padding: 0;
}
[role='button'] {
  cursor: pointer;
}
/* Base Button */
.tds-btn {
  --tds-btn--background-color: var(--tds-color--primary);
  --tds-btn--border-color: transparent;
  --tds-btn--border-radius: var(--tds-border-radius--pill);

  /* Probably generic pill styles, cross-reference with tds-btn */
  align-items: center;
  block-size: var(--tds-height--pill);
  border-radius: var(--tds-btn--border-radius);
  color: var(--tds-color--white);
  display: inline-flex;
  font-family: var(--tds-font-family--combined);
  font-size: var(--tds-btn--font-size);
  font-weight: var(--tds-font-weight--medium);
  justify-content: center;
  line-height: 1.2;
  padding: var(--tds-size--half) var(--tds-size--3x);
  position: relative;
  text-align: center;

  /* Button-specific styles */
  text-transform: uppercase;
  border: var(--tds-border-width--large) solid var(--tds-btn--border-color);
  background-color: var(--tds-btn--background-color);
  transition: border-color 0.33s ease, background-color 0.33s ease, color 0.33s ease;
}
button.tds-btn {
  vertical-align: middle;
}
/* Widths */
/* TODO: Should we define specific widths? */
@media (min-width: 600px) {
  .tds-btn {
    inline-size: auto;
  }

  .tds-btn--width-full {
    inline-size: 100%;
    inline-size: -webkit-fill-available;
  }
}
@media (max-width: 599px) {
  .tds-btn {
    inline-size: 100%;
    inline-size: -webkit-fill-available;
  }

  .tds-btn--width-auto {
    inline-size: auto;
  }
}
/* Sizes */
.tds-btn--small {
  --tds-height--pill: 28px;

  font-size: 10px;
}
.tds-btn--medium {
  --tds-height--pill: var(--tds-size--4x);
}
.tds-btn--large {
  --tds-height--pill: var(--tds-size--5x);
}
/* Variants */
.tds-btn--secondary {
  --tds-btn--background-color: transparent;
  --tds-btn--border-color: var(--tds-color--secondary);

  color: var(--tds-color--secondary);
}
.tds-btn--tertiary {
  --tds-btn--background-color: var(--tds-color--tertiary);

  color: var(--tds-text--color);
}
/* TODO: Deprecated; Remove in TDS 6 */
.tds-btn--blur {
  --tds-btn--background-color: hsla(255, 255, 255, 0.1);

  -webkit-backdrop-filter: blur(4px);

          backdrop-filter: blur(4px);
  color: var(--tds-text--color);
}
/* TODO: Deprecated; Remove in TDS 6 */
.tds-btn--semitransparent {
  opacity: var(--tds-opacity--70);
}
/* Hover */
:is(button, .tds-btn):not([disabled], .tds--disabled):is(:hover, .tds--hover) {
  cursor: pointer;
}
.tds-btn:not([disabled], .tds--disabled):is(:hover, .tds--hover) {
  --tds-btn--background-color: var(--tds-color--primary-highlight);
}
/* Focus */
.tds-btn:is(:focus, .tds--focus) {
  box-shadow: inset 0 0 0 var(--tds-border-width--medium);
  outline: none;
}
.tds-btn--secondary:not([disabled], .tds--disabled):is(:hover, .tds--hover, :focus, .tds--focus) {
  --tds-btn--background-color: var(--tds-color--secondary-highlight);

  color: var(--tds-color--inverse);
}
.tds-btn--tertiary:not([disabled], .tds--disabled):is(:hover, .tds--hover) {
  --tds-btn--background-color: var(--tds-color--tertiary-highlight);
}
.tds-btn--blur:not([disabled], .tds--disabled):is(:hover, .tds--hover) {
  --tds-btn--background-color: hsla(255, 255, 255, 0.2);
}
/* Icon support */
.tds-btn > .tds-icon--inline:first-child {
  -webkit-margin-start: calc(var(--tds-size--1x) * -1);
          margin-inline-start: calc(var(--tds-size--1x) * -1);
}
.tds-btn > .tds-icon--inline:last-child {
  -webkit-margin-end: calc(var(--tds-size--1x) * -1);
          margin-inline-end: calc(var(--tds-size--1x) * -1);
}
/* -- TDS Button -- Tile Variant from TDS Inspo Design
 * TODO: Move this to prototypes
----------------------------------------------------------------------------- */
.tds-btn--tile-container {
  --tds-tile-spacer: var(--tds-size--4x);

  margin: var(--tds-size--3x) 0;
  position: relative;
}
.tds-btn.tds-btn--tile {
  padding: var(--tds-size--8x);
  border-radius: 10px;
  background: var(--tds-color--grey70);
  color: #333;
  inline-size: 100%;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.5s cubic-bezier(0.5, 0, 0, 0.75);
}
@media (min-width: 600px) {
  .tds-btn.tds-btn--tile {
    min-inline-size: 300px;
    max-inline-size: 400px;
    inline-size: auto;
    -webkit-margin-end: var(--tds-tile-spacer);
            margin-inline-end: var(--tds-tile-spacer);
  }
}
/* If within a container, make the whole tile clickable */
.tds-btn--tile-container .tds-btn.tds-btn--tile {
  /* Adjust the button so that the overlay */
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  position: static;
}
.tds-btn.tds-btn--tile:is(:hover, .tds--hover) {
  box-shadow: 0 var(--tds-size--3x) var(--tds-size--4x) 0 var(--tds-color--grey50);
}
.tds-btn.tds-btn--tile:is(:focus, .tds--focus) {
  box-shadow:
    0 var(--tds-size--3x) var(--tds-size--4x) 0 var(--tds-color--grey50),
    inset 0 0 0 2px var(--tds-color--grey70),
    inset 0 0 0 4px var(--tds-color--grey50);
  outline: none;
}
.tds-btn--tile-container .tds-btn.tds-btn--tile::before {
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: var(--tds-tile-spacer);
  top: 0;
}
.tds-btn--tile-description {
  color: var(--tds-color--grey40);
  max-inline-size: 300px;
  padding: var(--tds-size--1x);
}
/* Add spacing when the description is properly placed after a tile */
.tds-btn--tile + .tds-btn--tile-description {
  -webkit-margin-before: var(--tds-size--4x);
          margin-block-start: var(--tds-size--4x);
}
.tds-btn--tile-description::before {
  background-color: var(--tds-color--grey50);
  block-size: 2px;
  content: '';
  display: block;
  inline-size: var(--tds-size--2x);
  -webkit-margin-after: var(--tds-size--2x);
          margin-block-end: var(--tds-size--2x);
}
.tds-btn_group {
  align-items: center;
  display: grid;
  gap: var(--tds-size--2x) var(--tds-size--3x);
  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
  justify-content: stretch;

  /* TODO: Remove down the road when scope of layout responsibilities moves more towards containers */
  margin: var(--tds-size--2x) 0;
}
/* Layouts */
@media (max-width: 599px) {
  .tds-btn_group {
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
  }

  .tds-btn_group--horizontal {
    grid-template-rows: none;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
}
@media (min-width: 600px) {
  .tds-btn_group {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .tds-btn_group--vertical {
    grid-template-columns: none;
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
  }
}
/* Variants */
.tds-btn_group--grouped {
  gap: 0;
  grid-auto-flow: column;
}
/* Note: borders do not yet support logical props */
.tds-btn_group--grouped > .tds-btn {
  border-inline-end-width: 0;
  border-inline-start-width: 0;
  border-radius: 0;
}
.tds-btn_group--grouped > .tds-btn:first-child {
  border-inline-start-width: var(--tds-border-width--large);
  border-radius: var(--tds-btn--border-radius) 0 0 var(--tds-btn--border-radius);
}
.tds-btn_group--grouped > .tds-btn:last-child {
  border-inline-end-width: var(--tds-border-width--large);
  border-radius: 0 var(--tds-btn--border-radius) var(--tds-btn--border-radius) 0;
}
[dir='rtl'] .tds-btn_group--grouped > .tds-btn:first-child {
  border-radius: 0 var(--tds-btn--border-radius) var(--tds-btn--border-radius) 0;
}
[dir='rtl'] .tds-btn_group--grouped > .tds-btn:last-child {
  border-radius: var(--tds-btn--border-radius) 0 0 var(--tds-btn--border-radius);
}
.tds-btn_group > .tds-link {
  justify-self: center;
}
.tds-card {
  --tds-card--padding: var(--tds-padding--card);
  --tds-card--cancel-padding: calc(var(--tds-card--padding) * -1);
  --tds-card--gap: var(--tds-card--padding);
  --tds-card--width: calc(75ch + (var(--tds-padding--card--dense) * 2));

  display: flex;
  max-inline-size: var(--tds-card--width);
  overflow: hidden;
  transition: background-color 0.33s ease;
}
.tds-card:not(.tds-card--open) {
  background-color: var(--tds-color--tertiary);
  border-radius: var(--tds-border-radius--card);
}
.tds-card:not(.tds-card--open).tds-card--dense {
  --tds-card--padding: var(--tds-padding--card--dense);

  border-radius: var(--tds-border-radius--card--dense);
}
.tds-card--highlighted {
  box-shadow: var(--tds-box-shadow--medium);
}
/* AWSM-4861 calls for cards on white scrims to be white  */
.tds-scrim--white .tds-card--highlighted {
  background-color: var(--tds-color--white);
}
.tds-card-asset {
  display: flex;
}
.tds-card--layout-vertical {
  flex-direction: column;
}
.tds-card-body {
  padding: var(--tds-card--padding);
}
.tds-card img {
  inline-size: 100%;
}
/* Note: locale selector headings depend on .tds-card override padding */
.tds-card *:is(h1, h2, h3, h4, h5, h6, .tds-text--h1, .tds-text--h1-alt, .tds-text--h2, .tds-text--h3, .tds-text--h4, .tds-text--h5, .tds-text--h6, .tds-text--caption-header) {
  -webkit-padding-before: 0;
          padding-block-start: 0;
}
.tds-card--open :is(.tds-card-asset, .tds-card-body) {
  padding: 0;
}
.tds-card:not(.tds-card--open) > .tds-icon {
  -webkit-margin-before: var(--tds-card--padding);
          margin-block-start: var(--tds-card--padding);
  -webkit-margin-start: var(--tds-card--padding);
          margin-inline-start: var(--tds-card--padding);
}
.tds-card:not(.tds-card--open) > .tds-icon + .tds-card-body {
  -webkit-padding-start: calc(var(--tds-card--padding) / 3);
          padding-inline-start: calc(var(--tds-card--padding) / 3);
}
.tds-card--layout-vertical:not(.tds-card--open) > .tds-icon + .tds-card-body {
  -webkit-padding-before: calc(var(--tds-card--padding) / 3);
          padding-block-start: calc(var(--tds-card--padding) / 3);
  -webkit-padding-start: var(--tds-card--padding);
          padding-inline-start: var(--tds-card--padding);
}
.tds-card--open .tds-card-asset > img {
  border-radius: var(--tds-border-radius--card);
}
.tds-card--open:not(.tds-card--layout-vertical) .tds-card-asset + .tds-card-body,
.tds-card--open:not(.tds-card--layout-vertical) .tds-card-body + .tds-card-asset {
  -webkit-padding-start: var(--tds-card--padding);
          padding-inline-start: var(--tds-card--padding);
}
.tds-card--open.tds-card--layout-vertical .tds-card-asset + .tds-card-body,
.tds-card--open.tds-card--layout-vertical .tds-card-body + .tds-card-asset {
  -webkit-padding-before: var(--tds-card--padding);
          padding-block-start: var(--tds-card--padding);
}
.tds-card--open:not(.tds-card--layout-vertical) .tds-icon + .tds-card-body,
.tds-card--open:not(.tds-card--layout-vertical) .tds-card-body + .tds-icon {
  -webkit-padding-start: calc(var(--tds-card--padding) / 3);
          padding-inline-start: calc(var(--tds-card--padding) / 3);
}
.tds-card--open.tds-card--layout-vertical .tds-icon + .tds-card-body,
.tds-card--open.tds-card--layout-vertical .tds-card-body + .tds-icon {
  -webkit-padding-before: calc(var(--tds-card--padding) / 3);
          padding-block-start: calc(var(--tds-card--padding) / 3);
}
/* Full-width variant of card */
.tds-card--full_width {
  --tds-card--width: 100%;
}
.tds-chip {
  --tds-chip--height: var(--tds-size--4x);

  align-items: center;
  background-color: var(--tds-color--tertiary);
  block-size: var(--tds-chip--height);
  border-radius: var(--tds-border-radius--pill);
  display: inline-flex;
  font-weight: var(--tds-font-weight--medium);
  justify-content: space-between;
  margin: var(--tds-size--half);
  -webkit-padding-end: var(--tds-size--half);
          padding-inline-end: var(--tds-size--half);
  -webkit-padding-start: var(--tds-size--2x);
          padding-inline-start: var(--tds-size--2x);
}
.tds-form-input-wrap .tds-chip {
  --tds-chip--height: calc(var(--tds-form-input--height) - var(--tds-size--1x));
  --tds-chip--inset: calc(var(--tds-form-item--indent) - var(--tds-size--half));

  background-color: var(--tds-scrim--background, --tds-color--white);
  -webkit-margin-end: var(--tds-size--1x);
          margin-inline-end: var(--tds-size--1x);
  -webkit-margin-start: calc(var(--tds-chip--inset) * -1);
          margin-inline-start: calc(var(--tds-chip--inset) * -1);
  -webkit-padding-start: var(--tds-chip--inset);
          padding-inline-start: var(--tds-chip--inset);
}
.tds-chip .tds-icon-btn {
  --tds-icon-btn--size: calc(var(--tds-chip--height) - var(--tds-size--1x));

  -webkit-margin-start: var(--tds-size--half);

          margin-inline-start: var(--tds-size--half);
}
/*
 * Override of form-input > button focus styles
 * TODO: refactor inputs to use icon-buttons in their leading/trailing spaces: AWSM-5175
 */
.tds-chip .tds-icon-btn:focus {
  outline: none !important;
}
/* Copy of enterprise style for dense form items */
.tds-form-item--dense .tds-chip {
  /* Adjust size to accomodate border width */
  --tds-chip--height: calc(var(--tds-size--3x) - 2px);

  font-size: var(--tds-font-size--20);
  line-height: var(--tds-size--4x);
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}
.tds-form-item--dense .tds-chip .tds-icon-btn {
  --tds-icon-btn--size: var(--tds-chip--height);
}
/******************************************************************************
Tesla Content Container

Simple containers that keep any content centered and "inset" among page flow.
Multiple sizes created for different needs, and when used consistently, will
create harmonious content flow.
******************************************************************************/
/* Default at 100% width */
.tds-content_container {
  --tds-content_container--gutter: var(--tds-size--3x);
  --tds-content_container--inline-size: 100%;
  --tds-content_container--max_width: 100%;

  display: block;
  inline-size: var(--tds-content_container--inline-size);
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  max-inline-size: var(--tds-content_container--max_width);
  -webkit-padding-end: var(--tds-content_container--gutter);
          padding-inline-end: var(--tds-content_container--gutter);
  -webkit-padding-start: var(--tds-content_container--gutter);
          padding-inline-start: var(--tds-content_container--gutter);
}
@media (min-width: 600px) {
  .tds-content_container {
    --tds-content_container--gutter: 36px;
  }
}
@media (min-width: 1200px) {
  .tds-content_container {
    --tds-content_container--gutter: var(--tds-size--6x);
  }
}
.tds-content_container--max_width {
  --tds-content_container--max_width: 1060px;
}
/******************************************************************************
 Size Modifiers - Small, Medium, and Large
******************************************************************************/
/* Containers adjusted when viewport is 900px wide or larger. */
@media (min-width: 900px) {
  .tds-content_container--small {
    --tds-content_container--inline-size: 50%;
  }

  .tds-content_container--medium {
    --tds-content_container--inline-size: 70%;
  }

  .tds-content_container--large {
    --tds-content_container--inline-size: 90%;
  }

  .tds-content_container--max_width.tds-content_container--small {
    --tds-content_container--max_width: 530px; /* 1060 * 0.5 */
  }

  .tds-content_container--max_width.tds-content_container--medium {
    --tds-content_container--max_width: 742px; /* 1060 * 0.7 */
  }

  .tds-content_container--max_width.tds-content_container--large {
    --tds-content_container--max_width: 954px; /* 1060 * 0.9 */
  }
}
.tds-date-picker {
  /* Fixed grid layout, per design */
  --tds-date-picker--day-font-size: var(--tds-font-size--30);
  --tds-date-picker--day-size: var(--tds-size--5x);
  --tds-date-picker--grid-size: 327px;
  --tds-date-picker--label-font-size: var(--tds-font-size--50);
  --tds-date-selected--color: var(--tds-color--white);
  --tds-day-radius: var(--tds-border-radius--circle);
  --tds-end-of-week-radius: var(--tds-size--half);

  inline-size: var(--tds-date-picker--grid-size);
}
.tds-date-picker--dense {
  --tds-date-picker--day-font-size: var(--tds-font-size--20);
  --tds-date-picker--day-size: var(--tds-size--4x);
  --tds-date-picker--label-font-size: var(--tds-font-size--30);

  /* Adjust to fit picker inside a tooltip (3x padding x2 sides) */
  inline-size: calc(var(--tds-date-picker--grid-size) - var(--tds-size--3x) * 2);
}
.tds-date-picker--range {
  --tds-date-picker--grid-gap: var(--tds-size--6x);

  display: flex;
  flex-wrap: wrap;
  gap: var(--tds-size--2x) var(--tds-date-picker--grid-gap);
}
.tds-date-picker--range.tds-date-picker--horizontal {
  /* Size horizontal space to 2 grids + gap */
  inline-size: calc(var(--tds-date-picker--grid-size) * 2 + var(--tds-date-picker--grid-gap));
}
.tds-date-picker-calendar {
  --tds-column-count: 7;

  flex-grow: 1;
}
.tds-date-picker-month {
  align-items: center;
  display: flex;
  flex-grow: 1;
  inline-size: 100%;
  min-block-size: var(--tds-date-picker--day-size);
}
.tds-date-picker-month button {
  display: flex;
  min-inline-size: calc(var(--tds-date-picker--day-size) * 1.5);
  z-index: 1;
}
.tds-date-picker-month button:first-child {
  justify-content: flex-end;
}
.tds-date-picker-month button:last-child {
  justify-content: flex-start;
}
.tds-date-picker-month label {
  flex-grow: 1;
  font-size: var(--tds-date-picker--label-font-size);
  font-weight: var(--tds-font-weight--medium);
  padding: 0;
  text-align: center;
}
.tds-date-picker-month button:not(:hover) .tds-icon {
  color: var(--tds-text--color--placeholder);
}
.tds-date-picker-days-label,
.tds-date-picker-days-grid {
  align-items: center;
  display: grid;
  gap: var(--tds-size--half) 0;
  grid-template-columns: repeat(var(--tds-column-count, 7), 1fr);
  margin: var(--tds-size--1x) 0;
}
.tds-date-picker-days-label {
  pointer-events: none;
}
.tds-date-picker :focus {
  outline: none;
}
.tds-date-picker :focus-visible {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
/* Days */
.tds-day {
  cursor: pointer;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.tds-day--not-this-month {
  pointer-events: none;
  visibility: hidden;
}
/* :is(div, span) is used to create the circle for a date */
.tds-day :is(div, span) {
  align-items: center;
  block-size: var(--tds-date-picker--day-size);
  border-radius: var(--tds-day-radius);
  display: flex;
  font-size: var(--tds-date-picker--day-font-size);
  inline-size: var(--tds-date-picker--day-size);
  justify-content: center;
}
.tds-day--today :is(div, span) {
  border: 1px solid var(--tds-color--tertiary-highlight);
}
.tds-day[disabled] {
  color: var(--tds-color--grey30);
  font-weight: var(--tds-font-weight--book);
}
/* stylelint-disable */
/* stylelint treats the :where selector like a higher specificity than it really is */
.tds-day:where(:hover, .tds-day--highlighted:not(.tds-day--between)) :is(div, span) {
  background-color: var(--tds-color--tertiary);
  border: none;
}
.tds-day--selected:not(.tds-day--between) :is(div, span) {
  background-color: var(--tds-color--primary);
}
.tds-day--selected:hover :is(div, span) {
  background-color: var(--tds-color--primary-highlight);
}
.tds-day--selected :is(div, span) {
  color: var(--tds-date-selected--color);
  font-weight: var(--tds-font-weight--medium);
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* ::before is used to create the semi-rectangular background/link shape */
.tds-day::before {
  background-color: var(--tds-scrim--background);
  bottom: 0;
  content: '';
  position: absolute;
  top: 0;
  z-index: -1;
}
.tds--indicate-focus .tds-date-picker :focus {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
.tds-date-picker :focus-visible * {
  transition: none;
}
.tds--indicate-focus .tds-date-picker :focus * {
  transition: none;
}
/* Tooltip */
.tds-tooltip.tds-date-picker-tooltip {
  inline-size: var(--tds-date-picker--grid-size);
}
.tds-tooltip.tds-date-range-picker-tooltip {
  max-inline-size: calc(100vw - 48px);
}
.tds-date-picker--selected .tds-day--selected::before {
  background-color: var(--tds-color--primary);
  color: var(--tds-color--white);
  font-weight: var(--tds-font-weight--medium);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tds-date-picker--hovering .tds-day--highlighted::before,
.tds-date-picker--hovering:not(.tds-date-picker--selected) .tds-day--selected:not(:hover):not(:hover ~ .tds-day--selected)::before {
  background-color: var(--tds-color--tertiary);
}
/* TODO: Convert to logical props when available in Safari: AWSM-4496 */
.tds-day--last::before,
.tds-day:nth-child(7n)::before {
  border-bottom-right-radius: var(--tds-end-of-week-radius);
  border-top-right-radius: var(--tds-end-of-week-radius);
}
.tds-day--first::before,
.tds-day:nth-child(7n + 1)::before {
  border-bottom-left-radius: var(--tds-end-of-week-radius);
  border-top-left-radius: var(--tds-end-of-week-radius);
}
[dir='rtl'] .tds-day--last::before,
[dir='rtl'] .tds-day:nth-child(7n)::before {
  border-bottom-left-radius: var(--tds-end-of-week-radius);
  border-radius: 0;
  border-top-left-radius: var(--tds-end-of-week-radius);
}
[dir='rtl'] .tds-day--first::before,
[dir='rtl'] .tds-day:nth-child(7n + 1)::before {
  border-bottom-right-radius: var(--tds-end-of-week-radius);
  border-radius: 0;
  border-top-right-radius: var(--tds-end-of-week-radius);
}
.tds-day--start:not(.tds-day--highlighted ~ .tds-day--start)::before {
  left: 50%;
  right: 0;
}
.tds-day--between::before {
  left: 0;
  right: 0;
}
.tds-day--highlighted:not(.tds-day--between)::before,
.tds-day--end::before {
  left: 0;
  right: 50%;
}
[dir='rtl'] .tds-day--start:not(.tds-day--highlighted ~ .tds-day--start)::before {
  left: 0;
  right: 50%;
}
[dir='rtl'] .tds-day--highlighted:not(.tds-day--between)::before,
[dir='rtl'] .tds-day--end::before {
  left: 50%;
  right: 0;
}
.tds-day--start.tds-day--end::before {
  display: none;
}
.tds-day--error :is(div, span) {
  background-color: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 3px var(--tds-color--red10);
}
/* Import order currently matters here for form items as some custom props are used
   throughout the suite of files and therefore added to this form.css "root" file
*/
/* --- Form Item Area
--------------------------------------------- */
.tds-form-item {
  --tds-form-input--background-color: var(--tds-color--tertiary);
  --tds-form-input--border-color: var(--tds-color--tertiary);
  --tds-form-input--height: calc(var(--tds-height--pill) - 2px);
  --tds-form-item--indent: 20px;
  --tds-form-item--spacer: var(--tds-size--1x);
  --tds-form-item--grid-template-areas: 'label' 'caption' 'input' 'feedback';
  --tds-form-item--grid-template-rows: min-content minmax(0, auto) minmax(var(--tds-form-input--height), auto) minmax(0, auto);

  align-items: flex-end;
  color: var(--tds-text--color);
  display: grid;
  gap: var(--tds-size--half) 0;
  grid-template: minmax(0, -webkit-max-content);
  grid-template: minmax(0, max-content);
  grid-template-areas: var(--tds-form-item--grid-template-areas);
  grid-template-rows: var(--tds-form-item--grid-template-rows);
  inline-size: 100%;
  -webkit-padding-after: var(--tds-form-item--spacer);
          padding-block-end: var(--tds-form-item--spacer);
  -webkit-padding-before: var(--tds-form-item--spacer);
          padding-block-start: var(--tds-form-item--spacer);
  position: relative;
}
/* Modifiers */
.tds-form-item--choice {
  --tds-form-input--background-color: transparent;
  --tds-form-input--border-color: var(--tds-text--color--light);
  --tds-form-input--border-radius: var(--tds-size--half);
  --tds-form-input--height: var(--tds-size--3x);
  --tds-form-item--grid-template-areas:
    'input label'
    '. caption'
    '. feedback';
  --tds-form-item--grid-template-rows: repeat(3, minmax(0, auto));
  --tds-form-item--indent: 0;

  align-content: center;
  align-items: center;
  -moz-column-gap: var(--tds-size--1x);
       column-gap: var(--tds-size--1x);
  justify-content: flex-start;
}
.tds-form-item--dense.tds-form-item--choice {
  --tds-form-input--height: var(--tds-size--2x);

  grid-column-gap: 12px;
}
.tds-fieldset .tds-form-item--choice {
  --tds-form-item--spacer: var(--tds-size--half);

  /* Compensate for extra empty feedback row that causes extra gap */
  -webkit-margin-after: var(--tds-size--half);
          margin-block-end: var(--tds-size--half);
  row-gap: 0;
}
.tds-form-item--outdent {
  --tds-form-item--indent: 0;
}
.tds-form-item--file-upload {
  --tds-form-item--grid-template-areas: 'label' 'caption' 'files' 'feedback' 'input';
  --tds-form-item--grid-template-rows: min-content minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto);
}
/* States */
.tds-form-item--error,
.tds-form-item--error .tds-form-item--choice {
  --tds-form-input--border-color: var(--tds-color--error);
}
/* Wrapper for Form Label and Tooltip */
.tds-form-label-wrap {
  --tds-form-label--color: var(--tds-text--color--light);

  align-items: center;
  display: flex;
  grid-area: label;
  line-height: var(--tds-line-height--50);
  -webkit-padding-end: var(--tds-size--1x);
          padding-inline-end: var(--tds-size--1x);
  -webkit-padding-start: var(--tds-form-item--indent);
          padding-inline-start: var(--tds-form-item--indent);
  text-align: start;
}
/* Form Label */
.tds-form-label {
  --tds-form-label--font-size: var(--tds-font-size--30);

  align-self: center;
  align-content: flex-end;
  color: var(--tds-form-label--color);
  transition: color 0.33s ease;
}
/* Only pointer the label if it's actually connected to an active input */
.tds-form-label[for] {
  cursor: pointer;
}
.tds-form-item--readonly .tds-form-label[for] {
  cursor: text;
}
.tds-form-item--choice .tds-form-label {
  align-items: center;
  grid-template-columns: minmax(-webkit-min-content, auto);
  grid-template-columns: minmax(min-content, auto);
}
.tds-form-input--disclaimer + .tds-form-label {
  --tds-form-label--font-size: var(--tds-font-size--20);
}
.tds-form-item--choice:hover .tds-form-label,
.tds-form-item--choice .tds-form-input:checked + .tds-form-label,
.tds-form-item--choice .tds-form-input:checked + .tds-form-label-wrap {
  --tds-form-label--color: var(--tds-color--secondary);
}
/* Label inner text */
.tds-form-label-text {
  grid-area: label-text;
  color: var(--tds-form-label--color);
  font-size: var(--tds-form-label--font-size);
  line-height: var(--tds-line-height--unitless);
  font-weight: var(--tds-font-weight--medium);
  display: inline-block;
  transition: color 0.33s ease;
}
.tds-form-label-caption {
  color: var(--tds-text--color--light);
  font-size: var(--tds-font-size--20);
  font-weight: var(--tds-font-weight--book);
  grid-area: caption;
  -webkit-padding-end: var(--tds-size--1x);
          padding-inline-end: var(--tds-size--1x);
  -webkit-padding-start: var(--tds-form-item--indent);
          padding-inline-start: var(--tds-form-item--indent);
}
.tds-form-item--choice .tds-form-label-caption {
  /* add margin on top of grid gap so that total space between form-items is --tds-size--1x */
  margin-block: calc(var(--tds-size--1x) * -1) var(--tds-size--half);

  /* cancel out grid gap between the label and caption */
  white-space: nowrap;
}
/* --- Originally was a `span`, but for semantics and accessibility,
   we cannot have a block-level element inside an inline element.
 ------------------------------------------------------------------------------------ */
.tds-form-label-tooltip {
  display: inline;
  -webkit-margin-start: 2px;
          margin-inline-start: 2px; /* TODO: TDS 5 (or 6?) refactor this away and use flexbox gap (AWSM-4434) */
}
.tds-form-label-wrap .tds-tooltip-wrapper .tds-icon {
  color: var(--tds-form-label--color);
}
/* Input wrapper */
.tds-form-input-wrap {
  inline-size: 100%;
  grid-area: input;
  display: grid;
  grid: 'leading input trailing' / -webkit-max-content 1fr -webkit-max-content;
  grid: 'leading input trailing' / max-content 1fr max-content;
  gap: 0;
  justify-items: stretch;
  align-content: center;
  align-items: center;
  position: relative;
  -webkit-padding-start: var(--tds-form-item--indent);
          padding-inline-start: var(--tds-form-item--indent);
  -webkit-padding-end: var(--tds-form-item--indent);
          padding-inline-end: var(--tds-form-item--indent);
  background-color: var(--tds-form-input--background-color);
  border: 1px solid var(--tds-form-input--border-color);
  border-radius: var(--tds-border-radius--form-item);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
/* Modifiers */
.tds-form-item--textarea .tds-form-input-wrap {
  padding: 0;
}
.tds-form-item--date .tds-form-input-wrap,
.tds-form-item--select .tds-form-input-wrap {
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}
.tds-form-item--text [type='date']::-webkit-datetime-edit {
  align-items: center;
  display: grid !important;
  font-family: var(--tds-font-family--combined);
}
/* States */
.tds-form-input-wrap:hover {
  --tds-form-input--border-color: var(--tds-color--tertiary-highlight);
}
.tds-form-input-wrap:focus-within {
  --tds-form-input--border-color: var(--tds-color--secondary-accent);
}
.tds-form-item--readonly .tds-form-input-wrap,
.tds-form-item--readonly .tds-form-input-wrap:focus-within,
.tds-form-item--readonly .tds-form-input-wrap:hover {
  --tds-form-input--background-color: transparent;
  --tds-form-input--border-color: var(--tds-color--hairline);
}
.tds-form-item--error .tds-form-input-wrap:hover {
  --tds-form-input--border-color: var(--tds-color--error);
}
.tds-form-item--error .tds-form-input-wrap:focus-within:hover {
  --tds-form-input--border-color: var(--tds-color--tertiary-highlight);
}
/* Input */
.tds-form-input,
.tds-form-item--text [type='date']::-webkit-datetime-edit {
  --tds-form-input--font-size: var(--tds-size--2x);

  block-size: var(--tds-form-input--height);
  grid-area: input;
  display: block;
  -webkit-appearance: none;
          appearance: none;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  font-size: var(--tds-form-input--font-size);
  font-weight: var(--tds-font-weight--medium);
  line-height: var(--tds-line-height--unitless);
  position: relative;
  box-shadow: inset 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.25s ease;
  transition: box-shadow 0.25s ease;
  color: var(--tds-text--color);
}
@media (min-width: 600px) {
  .tds-form-input,
  .tds-form-item--text [type='date']::-webkit-datetime-edit {
    --tds-form-input--font-size: var(--tds-font-size--30);
  }
}
/* Chrome Fix: In grid-within-grid in Chromium,
inputs force themselves to 100% width if not explicitly defined
AND will not acknowledge tokens like -webkit-fill-available */
input.tds-form-input,
select.tds-form-input {
  inline-size: 100%;
  text-overflow: ellipsis;
}
/* Modifiers */
textarea.tds-form-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  block-size: auto;
  min-block-size: calc(var(--tds-form-input--height) * 3);
  padding: calc(var(--tds-form-item--indent) / 2) var(--tds-form-item--indent);
  resize: none;
}
.tds-form-input:-moz-placeholder-shown {
  color: var(--tds-text--color--placeholder);
}
.tds-form-input:-ms-input-placeholder {
  color: var(--tds-text--color--placeholder);
}
.tds-form-input:placeholder-shown {
  color: var(--tds-text--color--placeholder);
}
.tds-form-item--choice .tds-form-input {
  inline-size: var(--tds-form-input--height);
  display: flex;
  border: 1px solid var(--tds-form-input--border-color);
  border-radius: var(--tds-form-input--border-radius);
  align-content: center;
  justify-content: center;
  align-items: center;
  outline: none;
}
.tds-form-item--select .tds-form-input {
  -webkit-padding-end: var(--tds-size--5x);
          padding-inline-end: var(--tds-size--5x);
}
.tds-form-item--readonly .tds-form-input {
  color: var(--tds-color--grey40);
}
[type='checkbox'].tds-form-input {
  --tds-form-input--check-height: 16px;
}
[type='radio'].tds-form-input {
  --tds-form-input--border-radius: 100%;
  --tds-form-input--check-height: 10px;
}
.tds-form-input--disclaimer {
  --tds-form-input--height: 22px;
}
/* Dark Scrim component-level override as the component currently
 * relies on a transparent background color by default even
  * on dark scrims which doesn't vibe well with Firefox and leads to a
 * transparent background with light text that is unreadable.
*/
:is(.tds-colorscheme--dark, .tds-scrim--black) .tds-form-input:focus {
  background-color: var(--tds-scrim--background);
}
/* States */
.tds-form-input:-webkit-autofill {
  -webkit-transition: background-color 9999s ease 9999s, color 9999s ease 9999s;
  transition: background-color 9999s ease 9999s, color 9999s ease 9999s;
}
/* Set auto-fill to match default input text */
.tds-form-input:-webkit-autofill::first-line {
  font-family: var(--tds-font-family--combined);
  font-size: var(--tds-form-input--font-size);
  font-weight: var(--tds-font-weight--medium);
  line-height: var(--tds-line-height--unitless);
}
.tds-form-input:focus {
  outline: 0;
}
.tds-form-item--choice .tds-form-input:not([disabled]),
.tds-form-item--date .tds-form-input:not([disabled]),
.tds-form-item--select .tds-form-input:not([disabled]),
.tds-form-item--dropdown .tds-form-input:not([disabled]) {
  cursor: pointer;
}
textarea.tds-form-input:hover,
textarea.tds-form-input:focus,
textarea.tds-form-input:active {
  resize: vertical;
}
.tds-form-item--choice .tds-form-input:focus {
  --tds-form-input--border-color: var(--tds-color--secondary);

  box-shadow: inset 0 0 0 1px var(--tds-color--secondary);
}
/* Check/Fill for Choices */
.tds-form-item--choice .tds-form-input::after {
  content: '';
  display: block;
  inline-size: var(--tds-form-input--check-height);
  block-size: var(--tds-form-input--check-height);
  border-radius: var(--tds-form-input--border-radius);
  transform: scale(0);
  transition: transform 0.33s var(--tds-bezier), border-color 0.33s var(--tds-bezier);
}
.tds-form-item--choice .tds-form-input:checked::after {
  transform: scale(1);
}
.tds-form-item--choice [type='checkbox']::after {
  --tds-form-input--border-radius: 0;

  background-image: var(--tds-background-image--check);
  background-repeat: no-repeat;
}
.tds-form-item--choice [type='radio']::after {
  background-color: var(--tds-color--secondary);
}
.tds-form-item--choice [type='radio']::after,
.tds-form-item--choice [type='radio']:checked::after {
  --tds-form-input--border-color: var(--tds-color--secondary);
}
/* Dense choice to match enterprise styles */
.tds-form-item--dense.tds-form-item--choice .tds-form-input {
  --tds-form-input--font-size: var(--tds-font-size--20);
  --tds-form-input--height: var(--tds-size--4x);
}
.tds-form-item--dense [type='checkbox'].tds-form-input {
  --tds-form-input--check-height: 8px;
}
.tds-form-item--dense [type='radio'].tds-form-input {
  --tds-form-input--check-height: 6px;
}
.tds-form-item--dense.tds-form-item--choice [type='checkbox']::after {
  background-position: 0 0;
  background-size: 20px;
}
/* Leading & Trailing */
.tds-form-input-leading,
.tds-form-input-trailing {
  align-items: center;
  block-size: 100%;
  display: flex;
}
.tds-form-input-leading {
  grid-area: leading;
}
.tds-form-input-trailing {
  grid-area: trailing;
}
.tds-form-item--dropdown .tds-form-input-trailing {
  cursor: pointer;
}
.tds-form-input-leading button,
.tds-form-input-trailing button {
  display: flex;
}
.tds-form-input-leading button:focus,
.tds-form-input-trailing button:focus {
  outline: none;
}
.tds-form-input-leading button:focus-visible,
.tds-form-input-trailing button:focus-visible {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
.tds-form-input[inputmode='tel'] ~ .tds-form-input-leading {
  -webkit-margin-end: var(--tds-size--half);
          margin-inline-end: var(--tds-size--half);
}
.tds--indicate-focus .tds-form-input-leading button:focus,
.tds--indicate-focus .tds-form-input-trailing button:focus {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
/* TODO: Post-custom dropdowns this can likely be refactored away */
.tds-form-item--date .tds-form-input-trailing,
.tds-form-item--select .tds-form-input-trailing {
  align-items: center;
  block-size: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  right: var(--tds-size--2x);
}
[dir='rtl'] .tds-form-item--date .tds-form-input-trailing,
[dir='rtl'] .tds-form-item--select .tds-form-input-trailing {
  left: var(--tds-size--2x);
  right: initial;
}
.tds-form-label-files {
  grid-area: files;
  overflow: hidden;
  -webkit-padding-end: var(--tds-size--1x);
          padding-inline-end: var(--tds-size--1x);
  -webkit-padding-start: var(--tds-form-item--indent);
          padding-inline-start: var(--tds-form-item--indent);
}
.tds-list-item--file {
  --tds-list-item--margin-block: calc(var(--tds-size--1x) / 4);

  align-items: center;
  display: flex;
  justify-content: space-between;
  max-inline-size: unset;
  -webkit-padding-after: calc(var(--tds-size--1x) / 4);
          padding-block-end: calc(var(--tds-size--1x) / 4);
  -webkit-padding-before: calc(var(--tds-size--1x) / 4);
          padding-block-start: calc(var(--tds-size--1x) / 4);
}
.tds-list-item--file > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tds-list-item--file > button {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tds-list-item--file > button .tds-icon {
  margin: 0;
}
.tds-list-item--file > button:focus {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
.tds-form-item--file-upload .tds-form-feedback-feedback {
  display: flex;
}
.tds-form-item--file-upload .tds-form-feedback-feedback .tds-icon {
  -webkit-margin-before: calc(var(--tds-size--1x) / 4);
          margin-block-start: calc(var(--tds-size--1x) / 4);
  -webkit-margin-end: var(--tds-size--half);
          margin-inline-end: var(--tds-size--half);
}
.tds-form-file-input-wrap {
  grid-area: input;
  -webkit-padding-before: var(--tds-size--1x);
          padding-block-start: var(--tds-size--1x);
  position: relative;
}
.tds-file-input {
  block-size: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}
.tds-file-input[disabled] + .tds-btn {
  cursor: not-allowed;
  opacity: var(--tds-opacity--50);
}
.tds-file-input:not([disabled]):focus + .tds-btn {
  box-shadow: inset 0 0 0 var(--tds-border-width--medium);
  outline: none;
}
.tds-form-item--range {
  --tds-form-input--background-color: transparent;
  --tds-form-input--border-color: transparent;
  --tds-form-input--height: auto;
  --tds-form-item--indent: var(--tds-size--1x);
  --tds-range-slider--radius: 10px;
  --tds-range-slider--thumb-offset: -7px;
  --tds-range-slider--thumb-opacity: 1;
  --tds-range-slider--thumb-radius: var(--tds-size--4x);
  --tds-range-slider--thumb-size-x: var(--tds-size--3x);
  --tds-range-slider--thumb-size-y: var(--tds-size--3x);
}
.tds-form-item--range .tds-form-label {
  align-content: center;
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.tds-form-item--range .tds-form-label-wrap {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.tds-form-item--range .tds-form-label-wrap.tds-form-label-wrap--horizontal {
  --tds-form-item--grid-template-areas: 'label input';
}
.tds-form-item--range .tds-form-label-caption {
  direction: initial;
  font-variant: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
.tds-form-item--range .tds-form-input-wrap {
  -webkit-padding-end: 0;
          padding-inline-end: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}
.tds-form-item--range .tds-form-input-wrap:hover {
  --tds-form-input--border-color: transparent;
}
.tds-form-item--range .tds-form-input {
  --tds-range-slider--track-height: 10px;
  --tds-form-input--height: var(--tds-range-slider--track-height);
  --tds-range-slider--thumb-radius: var(--tds-border-radius--pill);

  cursor: ew-resize;
  z-index: 1;
}
/* Browser-specific semi-duplicated styles
 * Once browsers agree on a standard we can consolidate these */
.tds-form-item--range .tds-form-input::-webkit-slider-runnable-track {
  background-color: var(--tds-color--grey50);
  block-size: var(--tds-form-input--height);
  border: none;
  border-radius: var(--tds-range-slider--radius);
  inline-size: 100%;
}
.tds-form-item--range .tds-form-input::-moz-range-track {
  background-color: var(--tds-color--grey50);
  block-size: var(--tds-form-input--height);
  border: none;
  border-radius: var(--tds-range-slider--radius);
  inline-size: 100%;
}
.tds-form-item--range .tds-form-input::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  background-color: var(--tds-color--white);
  block-size: var(--tds-range-slider--thumb-size-y);
  border: none;
  border-radius: var(--tds-range-slider--thumb-radius);
  box-shadow: 0 0 0 1px var(--tds-color--grey50);
  inline-size: var(--tds-range-slider--thumb-size-x);
  -webkit-margin-before: var(--tds-range-slider--thumb-offset);
          margin-block-start: var(--tds-range-slider--thumb-offset);
  opacity: var(--tds-range-slider--thumb-opacity, 1);
  position: relative;
  z-index: 40;
}
.tds-form-item--range .tds-form-input::-moz-range-thumb {
  background-color: var(--tds-color--white);
  block-size: var(--tds-range-slider--thumb-size-y);
  border: none;
  border-radius: var(--tds-range-slider--thumb-radius);
  box-shadow: 0 0 0 1px var(--tds-color--grey50);
  inline-size: var(--tds-range-slider--thumb-size-x);
  margin-block-start: var(--tds-range-slider--thumb-offset);
  opacity: var(--tds-range-slider--thumb-opacity, 1);
  z-index: 2;
}
/* Target Webkit browsers only */
.tds-form-input--range--progress {
  --tds-range-progress-fill: 100%;

  position: relative;
}
.tds-form-input--range--progress .tds-form-input::before {
  background-color: var(--tds-color--primary);
  block-size: 100%;
  border-radius: var(--tds-range-slider--radius);
  content: '';
  display: block;
  inline-size: var(--tds-range-progress-fill);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
}
[dir='rtl'] .tds-form-input--range--progress .tds-form-input::before {
  left: auto;
  right: 0;
}
/* More Standard browser styling below here */
.tds-form-input--range--progress .tds-form-input::-moz-range-progress {
  background-color: var(--tds-color--primary);
  block-size: var(--tds-form-input--height);
  border-radius: var(--tds-range-slider--radius);
}
/* This is messy, but they can't combined because Safari's pseudo selector
   can't be combined with anything or else it won't work... when we have
   a cleaner standard, this whole file will be updated (again).
 */
.tds-form-item--range .tds-form-input:focus-visible {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
.tds--indicate-focus .tds-form-item--range .tds-form-input:focus {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
.tds-form-item--range .tds-form-input:focus::-webkit-slider-runnable-track {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
.tds-form-item--search input::-webkit-search-decoration,
.tds-form-item--search input::-webkit-search-cancel-button,
.tds-form-item--search input::-webkit-search-results-button,
.tds-form-item--search input::-webkit-search-results-decoration {
  -webkit-appearance: none;
          appearance: none;
}
.tds-form-item--search .tds-form-input-wrap {
  transition:
    padding 0.25s ease-in-out,
    background-color 0.25s ease-in-out,
    border 0.25s ease-in-out,
    inline-size 0.25s ease-in-out;
}
.tds-form-item--search .tds-form-input-leading,
.tds-form-item--search .tds-form-input-trailing {
  display: flex;
}
.tds-form-item--search .tds-form-input-leading button {
  -webkit-margin-start: -6px;
          margin-inline-start: -6px;
}
.tds-form-item--search .tds-form-input-trailing button {
  -webkit-margin-end: -6px;
          margin-inline-end: -6px;
}
.tds-form-item--search[aria-expanded='false'] .tds-form-input-trailing {
  display: none;
}
.tds-form-item--search[aria-expanded='false'] .tds-form-input-wrap,
.tds-form-item--search[aria-expanded='false'] .tds-form-input {
  inline-size: 0;
}
.tds-form-item--search[aria-expanded='false'] .tds-form-input-wrap {
  --tds-form-input--background-color: transparent;
  --tds-form-input--border-color: transparent;
  --tds-search-closed--padding-inline-end: var(--tds-size--4x);

  -webkit-padding-end: var(--tds-search-closed--padding-inline-end);

          padding-inline-end: var(--tds-search-closed--padding-inline-end);
}
.tds-form-item--search .tds-form-input-trailing .tds-icon {
  opacity: 1;
  z-index: 1;
  transition: opacity 0.25s ease-in-out;
}
.tds-form-item--search[aria-expanded='false'] .tds-form-input-trailing .tds-icon {
  opacity: 0;
  z-index: -1;
  transition: opacity 0.25s ease-in-out;
}
.tds-form-item--search[aria-expanded='true'] .tds-form-input-wrap,
.tds-form-item--search[aria-expanded='true'] .tds-form-input {
  --tds-form-input--background-color: var(--tds-color--tertiary);
  --tds-form-input--border-color: var(--tds-color--tertiary);
  --tds-search-closed--padding-inline-end: var(--tds-form-item--indent);

  inline-size: 100%;
}
.tds-form-item--search[aria-expanded='true'] .tds-form-input-wrap:focus-within {
  --tds-form-input--border-color: var(--tds-color--secondary-accent);
}
.tds-form-item--search[aria-expanded='true'] .tds-form-input-trailing {
  display: flex;
}
/* Intl Phone Tooltip - Note: composite pattern, styles below are just for label formatting */
.tds-country-phone-label--long {
  display: flex;
  text-align: start;
  width: 100%;
}
.tds-country-phone-label--long .tds-country-code {
  display: inline-block;
  flex-shrink: 0;
  width: 2.5em;
}
/* --- Form Item Feedback Area
--------------------------------------------- */
.tds-form-feedback-wrap {
  display: grid;
  grid-area: feedback;
  grid-template-areas: 'helper feedback';
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  -webkit-padding-end: var(--tds-form-item--indent);
          padding-inline-end: var(--tds-form-item--indent);
  -webkit-padding-start: var(--tds-form-item--indent);
          padding-inline-start: var(--tds-form-item--indent);
}
/* Feedback Internals */
.tds-form-feedback-helper,
.tds-form-feedback-feedback {
  font-weight: var(--tds-form-feedback--font-weight);
  margin: 0;
  padding: 0;
  text-align: var(--tds-form-feedback--text-align);
}
/* Helper Text */
.tds-form-feedback-helper {
  --tds-form-feedback--font-weight: var(--tds-font-weight--book);
  --tds-form-feedback--text-align: start;

  grid-area: helper;
}
.tds-form-item--error .tds-form-feedback-helper {
  display: none;
}
/* Feedback/Error Text */
.tds-form-feedback-feedback {
  --tds-form-feedback--text-align: end;

  grid-area: feedback;
}
.tds-form-item--error .tds-form-feedback-feedback {
  --tds-form-feedback--font-weight: var(--tds-font-weight--medium);
  --tds-form-feedback--text-align: start;

  color: var(--tds-color--error);
}
/* --- Fieldsets and Legends
--------------------------------------------- */
.tds-fieldset {
  --tds-fieldset--indent: 0;
  --tds-fieldset--spacer: var(--tds-size--1x);

  border: 0;
  margin: 0;
  padding: 0;
  -webkit-padding-after: var(--tds-fieldset--spacer);
          padding-block-end: var(--tds-fieldset--spacer);
  -webkit-padding-before: 0;
          padding-block-start: 0;
  -webkit-padding-start: var(--tds-fieldset--indent);
          padding-inline-start: var(--tds-fieldset--indent);
}
.tds-fieldset .tds-form-feedback-wrap {
  min-block-size: 0;
}
/* Note: addresses inconsistent spacing for option groups and radios/checkboxes
TODO: AWSM-4172 - Address this in a post- selector component refactor */
.tds-fieldset--choice {
  --tds-fieldset--indent: 20px;

  -webkit-padding-after: calc(var(--tds-fieldset--spacer) - var(--tds-size--half));

          padding-block-end: calc(var(--tds-fieldset--spacer) - var(--tds-size--half));
}
.tds-fieldset--selector {
  -webkit-padding-after: calc(var(--tds-fieldset--spacer) + var(--tds-size--half));
          padding-block-end: calc(var(--tds-fieldset--spacer) + var(--tds-size--half));
}
.tds-legend {
  /* Note: this color should be overridden by .tds-text--[h1-h5]
  which only works if text styles are imported AFTER form styles
  due to identical specificity */
  color: var(--tds-text--color--light);
  display: block;
  font-weight: var(--tds-font-weight--medium);

  /* Browser Issue: Normally padding would be set on the fieldset to match form-items
  however, Chrome/Safari/FF all have unusual overlapping paddings for legends
  when inside fieldsets, which leads to inconsistent space between the legend
  and the next sibling element */
  -webkit-padding-after: var(--tds-fieldset--spacer);
          padding-block-end: var(--tds-fieldset--spacer);
  -webkit-padding-before: var(--tds-fieldset--spacer);
          padding-block-start: var(--tds-fieldset--spacer);
}
/* See Browser Issue (above) */
.tds-tooltip > .tds-fieldset:first-child > .tds-legend {
  -webkit-padding-before: 0;
          padding-block-start: 0;
}
/* --- Specific Form Layouts
--------------------------------------------- */
.tds-form-layout--multicolumn {
  --grid-template-column-width: 200px;

  align-items: start;
  display: grid;
  gap: 0 var(--tds-size--3x);
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-template-column-width), 1fr));
}
.tds-form-layout--date-range {
  position: relative;
}
/*
 * Icon Button
 * - Distinct from regular buttons, in that this is designed to handle a standalone icon without visible text
 *
 * In-Progress Component
 * - Expect the component structure to change as this pattern becomes more refined over the course of TDS v5
**/
.tds-icon-btn {
  --tds-icon-btn--background: transparent;
  --tds-icon-btn--border-width: var(--tds-border-width--medium);
  --tds-icon-btn--size: var(--tds-size--5x);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tds-icon-btn--size);
  block-size: var(--tds-icon-btn--size);
  padding: var(--tds-size--half);
  border-radius: var(--tds-border-radius--pill);
  background-color: var(--tds-icon-btn--background);
  box-shadow: inset 0 0 0 0;
  -webkit-backdrop-filter: blur(0);
          backdrop-filter: blur(0);
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;

  /* Border remains transparent all the time, just functions like a spacer to inset
  the focus state's box shadow. Will refactor someday,
  once buttons have better focus states */
  border: var(--tds-icon-btn--border-width) solid transparent;
}
/* States */
.tds-icon-btn:focus {
  box-shadow: inset 0 0 0 var(--tds-icon-btn--border-width);
  outline: none;
}
.tds-icon-btn:is(:hover, .tds--highlighted),
/* Treat TR hover like a hover on the button */
.tds-data-table tbody tr:is(:hover, .tds--highlighted) .tds-icon-btn {
  --tds-icon-btn--background: var(--tds-pill--blur-color);

  -webkit-backdrop-filter: blur(var(--tds-blur--button));

          backdrop-filter: blur(var(--tds-blur--button));
}
/* Sizes */
.tds-icon-btn.tds-icon-btn--large {
  --tds-icon-btn--border-width: var(--tds-border-width--medium);
  --tds-icon-btn--size: var(--tds-size--5x);
}
.tds-icon-btn.tds-icon-btn--medium {
  --tds-icon-btn--border-width: var(--tds-border-width--small);
  --tds-icon-btn--size: var(--tds-size--4x);
}
.tds-icon-btn.tds-icon-btn--small {
  --tds-icon-btn--border-width: var(--tds-border-width--small);
  --tds-icon-btn--size: 28px;
}
/**
 * Icon
 * - Collects any overrides and/or new styles for the Stable Icon set
 */
:root,
.tds-component-preview {
  --tds-icon--bg: transparent;
  --tds-icon--size: 24px;
}
.tds-icon {
  background: var(--tds-icon--bg);
  block-size: var(--tds-icon--size);
  content: '';
  display: block;
  inline-size: var(--tds-icon--size);
  max-inline-size: 100%;
  min-block-size: var(--tds-icon--size);
  min-inline-size: var(--tds-icon--size);
  overflow: hidden;
  text-indent: -9999px;
}
.tds-icon--small {
  --tds-icon--size: 16px;
}
/* Auto-flip all arrow variants for RTL */
[dir='rtl'] :is([class*='tds-icon-arrow'], [class*='tds-icon-chevron'], [class*='tds-icon-speaker']) {
  transform: rotateY(180deg);
}
/* Variants */
.tds-icon--inline {
  display: inline-block;
}
.tds-icon--inline:last-child {
  -webkit-margin-start: var(--tds-size--half);
          margin-inline-start: var(--tds-size--half);
}
.tds-icon--inline:first-child {
  -webkit-margin-end: var(--tds-size--half);
          margin-inline-end: var(--tds-size--half);
}
/* Alignment */
.tds-icon--text-bottom {
  vertical-align: text-bottom;
}
.tds-icon--text-top {
  vertical-align: text-top;
}
.tds-icon--text-middle {
  vertical-align: middle;

  /* Visual offset to align to the center of Gotham's capital glyphs */
  -webkit-margin-before: -0.2em;
          margin-block-start: -0.2em;
}
/* Wordmark */
.tds-icon-logo-wordmark {
  inline-size: calc(var(--tds-icon--size) * 5);
}
/* Loader
Note the mask SVG path is the same as the path in the icons.
The mask hides the background conic-gradient, and the SVG path transparent color hides the SVG's path.
This is makes the loader icon backward compatible.
*/
.tds-icon-loader {
  background: conic-gradient(from 30deg, rgba(119, 119, 119, 0), rgba(119, 119, 119, 0.48), rgba(119, 119, 119, 0.8), rgba(119, 119, 119, 1));
  color: rgba(255, 255, 255, 0);
  -webkit-mask: url("data:image/svg+xml,<svg width='48' height='48' xmlns='http://www.w3.org/2000/svg'><path d='M24 1a2.347 2.347 0 1 1 0 4.694 18.306 18.306 0 1 0 13.359 5.792 2.347 2.347 0 1 1 3.426-3.21A23 23 0 1 1 24 1Z' fill='black'/></svg>");
          mask: url("data:image/svg+xml,<svg width='48' height='48' xmlns='http://www.w3.org/2000/svg'><path d='M24 1a2.347 2.347 0 1 1 0 4.694 18.306 18.306 0 1 0 13.359 5.792 2.347 2.347 0 1 1 3.426-3.21A23 23 0 1 1 24 1Z' fill='black'/></svg>");
  -webkit-mask-size: cover;
          mask-size: cover;
  opacity: var(--tds-opacity--70);
}
/* Sub-elements */
.tds-icon * {
  transition: fill 0.3s ease, stroke 0.3s ease;
}
/* Inline Dropdown */
.tds-inline-dropdown.tds-tooltip {
  /* Tooltip padding determines the negative outdent when aligned to a trigger's edge */
  --tds-tooltip--padding: var(--tds-padding-inline--pill);

  padding: calc(var(--tds-tooltip--padding) / 2) 0;
}
.tds-inline-dropdown-trigger {
  align-items: center;
  display: flex;
  font-weight: var(--tds-font-weight--medium);

  /* Hacky offset - balances the focus-indication visually when keyboarding */
  -webkit-margin-start: -4px;
          margin-inline-start: -4px;
  -webkit-padding-start: var(--tds-size--half);
          padding-inline-start: var(--tds-size--half);
}
.tds-inline-dropdown-trigger:focus {
  outline: none;
}
.tds-inline-dropdown-trigger:focus-visible {
  outline: var(--tds-outline--focus);
}
.tds--indicate-focus .tds-inline-dropdown-trigger:focus {
  outline: var(--tds-outline--focus);
}
/* Listbox - Temp home for styles */
.tds-listbox {
  max-block-size: 300px;
  overflow-y: auto;
  scroll-behavior: auto;
}
.tds-listbox-option {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  background-color: transparent;
  margin: 0;
  padding: calc(var(--tds-padding-block--pill) / 2) var(--tds-padding-inline--pill);
  text-align: start;
  inline-size: 100%;
  transition: background-color 0.3s ease;
}
[aria-multiselectable='true'] .tds-listbox-option {
  justify-content: flex-start;
}
.tds-listbox-option:hover {
  background-color: var(--tds-color--tertiary);
}
.tds-listbox-option:focus {
  outline: none;
}
.tds-listbox-option:focus-visible {
  outline: var(--tds-outline--focus);
  outline-offset: -2px;
}
.tds--indicate-focus .tds-listbox-option:focus {
  outline: var(--tds-outline--focus);
  outline-offset: -2px;
}
.tds-listbox-option.tds--selected {
  background-color: var(--tds-color--tertiary-highlight);
}
/* Normally inline icons have a visual adjustment to their alignment to match with text,
 * but in this case it's not necessary */
.tds-listbox-option .tds-icon {
  color: transparent;
  transform: scale(0);
  position: relative;
  transition: color 0.3s ease, transform 0.3s ease;
}
.tds--selected .tds-icon {
  color: currentColor;
  transform: scale(1);
}
.tds-singleselect-icon {
  top: 0;
}
.tds-multiselect-box {
  display: inline-block;
  block-size: calc(var(--tds-size--2x) + 2px);
  inline-size: calc(var(--tds-size--2x) + 2px);
  border: 1px solid var(--tds-color--secondary-accent);
  border-radius: var(--tds-size--half);
  -webkit-margin-end: 12px;
          margin-inline-end: 12px;
  transition: border-color 0.3s ease;
}
.tds--selected .tds-multiselect-box {
  border-color: var(--tds-color--secondary);
}
.tds-icon-trigger {
  --tds-icon-trigger--animation:
    color 900ms var(--tds-bezier),
    border 900ms var(--tds-bezier),
    opacity 900ms var(--tds-bezier),
    transform 900ms var(--tds-bezier),
    box-shadow 250ms var(--tds-bezier),
    background-color 900ms var(--tds-bezier);
  --tds-icon-trigger--border_size: 2px;
  --tds-icon-trigger--padding-inline-end: var(--tds-size--1x);
  --tds-icon-trigger--padding-inline-start: var(--tds-size--4x);

  align-items: center;
  background: none;
  border: none;
  color: var(--tds-text--color);
  cursor: pointer;
  display: inline-flex;
  flex-flow: row nowrap;
  font-size: var(--tds-font-size--20);
  min-block-size: var(--tds-size--5x);

  /* Should be the same height as buttons -- 40px */
  min-inline-size: var(--tds-size--3x);
  -webkit-padding-after: var(--tds-size--1x);
          padding-block-end: var(--tds-size--1x);
  -webkit-padding-before: var(--tds-size--1x);
          padding-block-start: var(--tds-size--1x);
  -webkit-padding-end: var(--tds-icon-trigger--padding-inline-end);
          padding-inline-end: var(--tds-icon-trigger--padding-inline-end);
  -webkit-padding-start: var(--tds-icon-trigger--padding-inline-start);
          padding-inline-start: var(--tds-icon-trigger--padding-inline-start);
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tds-icon-trigger:focus-visible {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
.tds-icon-trigger:disabled,
.tds-icon-trigger.tds--disabled {
  cursor: not-allowed;
  opacity: var(--tds-opacity--50);
}
.tds-icon-trigger::after {
  border: none;
  opacity: 0;
}
.tds-icon-trigger .tds-label-title {
  text-transform: uppercase;
}
.tds-icon-crosshatch {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  block-size: var(--tds-size--3x);
  border: var(--tds-icon-trigger--border_size) solid var(--tds-color--secondary-highlight);
  border-radius: var(--tds-size--3x);
  inline-size: var(--tds-size--3x);
  left: 0;
  padding: 0;
  position: absolute;
  transition: var(--tds-icon-trigger--animation);
}
.tds-icon-crosshatch::before,
.tds-icon-crosshatch::after {
  background-color: var(--tds-color--secondary-highlight);
  border-radius: 4px;
  bottom: 0;
  content: '';
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  transition: var(--tds-icon-trigger--animation);
}
.tds-icon-crosshatch::before {
  block-size: calc(var(--tds-size--2x) - 4px);
  inline-size: var(--tds-icon-trigger--border_size);
}
.tds-icon-crosshatch::after {
  block-size: var(--tds-icon-trigger--border_size);
  inline-size: calc(var(--tds-size--2x) - 4px);
}
/* Small icon trigger */
.tds-icon-trigger--small {
  --tds-icon-trigger--padding-inline-start: calc(var(--tds-size--2x) + 8px);

  min-block-size: calc(var(--tds-size--2x) + 10px);
}
.tds-icon-trigger--small .tds-icon-crosshatch {
  block-size: var(--tds-size--2x);
  inline-size: var(--tds-size--2x);
}
.tds-icon-trigger--small .tds-icon-crosshatch::before {
  block-size: calc(var(--tds-size--2x) - 10px);
}
.tds-icon-trigger--small .tds-icon-crosshatch::after {
  inline-size: calc(var(--tds-size--2x) - 10px);
}
/* Unenclosed Trigger */
.tds-icon-trigger--unenclosed {
  transition: var(--tds-icon-trigger--animation);
}
.tds-icon-trigger--unenclosed .tds-icon-crosshatch {
  border: none;
}
.tds-icon-trigger--unenclosed .tds-label-title {
  -webkit-margin-end: var(--tds-size--1x);
          margin-inline-end: var(--tds-size--1x);
}
/* Other Modifiers */
.tds-icon-trigger--reversed {
  --tds-icon-trigger--padding-inline-end: var(--tds-size--4x);
  --tds-icon-trigger--padding-inline-start: 0;
}
.tds--indicate-focus .tds-icon-trigger:focus {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
.tds-icon-trigger--reversed .tds-icon-crosshatch {
  left: auto;
  right: 0;
}
[dir='rtl'] .tds-icon-crosshatch {
  left: initial;
  right: 0;
}
[dir='rtl'] .tds-icon-trigger--reversed,
[dir='rtl'] .tds-icon-trigger--reversed .tds-icon-crosshatch {
  left: 0;
  right: initial;
}
[aria-pressed='true'] .tds-icon-crosshatch::before {
  transform: rotateZ(90deg);
}
[aria-pressed='true'] .tds-icon-crosshatch::after {
  opacity: var(--tds-opacity--transparent);
  transform: rotateZ(180deg);
}
/* Rotate icon */
.tds-icon-trigger--rotate[aria-pressed='true'] .tds-icon-crosshatch::before {
  transform: rotateZ(135deg);
}
.tds-icon-trigger--rotate[aria-pressed='true'] .tds-icon-crosshatch::after {
  opacity: var(--tds-opacity--100);
  transform: rotateZ(315deg);
}
.tds-icon-trigger--invert-colors[aria-pressed='true'] .tds-icon-crosshatch {
  background-color: var(--tds-color--secondary-highlight);
}
.tds-icon-trigger--invert-colors[aria-pressed='true'] .tds-icon-crosshatch::before,
.tds-icon-trigger--invert-colors[aria-pressed='true'] .tds-icon-crosshatch::after {
  background-color: var(--tds-color--inverse);
}
.tds-icon-trigger--chevron .tds-icon {
  transition: var(--tds-icon-trigger--animation);
}
.tds-icon-trigger--chevron[aria-pressed='true'] .tds-icon {
  transform: rotateX(180deg);
}
.tds-icon-trigger--chevron {
  --tds-icon-trigger--padding-inline-end: 0;
  --tds-icon-trigger--padding-inline-start: 0;

  gap: var(--tds-size--half);
}
:root,
.tds-component-preview {
  --tds-gutter: var(--tds-size--3x);
  --tds-gutter--half: calc(var(--tds-size--3x) / 2);
  --tds-gutter--negative: calc(var(--tds-size--3x) * -1);
  --tds-gutter--half_negative: calc(var(--tds-gutter--negative) / 2);
}
.tds-flex {
  display: flex;
  flex-flow: column wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 600px) {
  .tds-flex {
    flex-flow: row wrap;
  }
}
.tds-flex-gutters {
  -webkit-margin-after: var(--tds-size--3x);
          margin-block-end: var(--tds-size--3x);
  -webkit-margin-before: var(--tds-gutter--negative);
          margin-block-start: var(--tds-gutter--negative);
  -webkit-margin-start: var(--tds-gutter--negative);
          margin-inline-start: var(--tds-gutter--negative);
}
@media (max-width: 599px) {
  .tds-flex-small-gutters > * {
    -webkit-margin-before: var(--tds-size--1x);
            margin-block-start: var(--tds-size--1x);
    -webkit-margin-after: var(--tds-size--1x);
            margin-block-end: var(--tds-size--1x);
  }

  .tds-flex-small-gutters > :first-child {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  .tds-flex-small-gutters > :last-child {
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
}
@media (min-width: 600px) {
  .tds-flex-small-gutters > * {
    -webkit-margin-start: var(--tds-size--1x);
            margin-inline-start: var(--tds-size--1x);
    -webkit-margin-end: var(--tds-size--1x);
            margin-inline-end: var(--tds-size--1x);
  }

  .tds-flex-small-gutters > :first-child {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }

  .tds-flex-small-gutters > :last-child {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}
.tds-flex--nowrap {
  flex-wrap: nowrap;
}
.tds-flex-item {
  flex: 1;
}
.tds-grid--show_grid .tds-flex-item {
  overflow: hidden;
  position: relative;
}
.tds-grid--show_grid .tds-flex-item::before {
  background-color: rgba(149, 236, 255, 0.1);
  block-size: 100%;
  -webkit-border-end: 1px solid rgba(149, 236, 255, 0.3);
          border-inline-end: 1px solid rgba(149, 236, 255, 0.3);
  -webkit-border-start: 1px solid rgba(149, 236, 255, 0.3);
          border-inline-start: 1px solid rgba(149, 236, 255, 0.3);
  content: '';
  display: block;
  inline-size: calc(100% - 2px);
  left: 1px;
  position: absolute;
  top: 0;
}
.tds-grid--show_grid.tds-flex-gutters .tds-flex-item::before,
.tds-grid--show_grid .tds-flex-gutters .tds-flex-item::before {
  inline-size: calc(100% - 26px);
  left: var(--tds-size--3x);
  top: var(--tds-size--3x);
}
.tds-flex-gutters .tds-flex-item {
  -webkit-padding-before: var(--tds-size--3x);
          padding-block-start: var(--tds-size--3x);
  -webkit-padding-start: var(--tds-size--3x);
          padding-inline-start: var(--tds-size--3x);
}
.tds-flex--flex_cells > .tds-flex-item {
  display: flex;
}
.tds-flex-item--no_gutter {
  -webkit-padding-before: 0;
          padding-block-start: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}
.tds-flex-gutters .tds-flex-gutters {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
/* Columns spanning multiples
--------------------------------------------------------------------------- */
[class*='tds-flex--col_'] {
  flex: none;
  transition: width 250ms ease-in-out;
}
@media (min-width: 600px) {
  .tds-flex--col_1of2 {
    inline-size: 50%;
  }

  .tds-flex--col_1of3 {
    inline-size: 33.3333%;
  }

  .tds-flex--col_2of3 {
    inline-size: 66.6667%;
  }

  .tds-flex--col_1of4 {
    inline-size: 25%;
  }

  .tds-flex--col_3of4 {
    inline-size: 75%;
  }

  .tds-flex--col_1of1 {
    inline-size: 100%;
  }
}
/* Vertical Alignment per row
--------------------------------------------------------------------------- */
.tds-flex--top {
  align-items: flex-start;
}
.tds-flex--bottom {
  align-items: flex-end;
}
.tds-flex--center {
  align-items: center;
}
/* Horizontal Alignment per row
--------------------------------------------------------------------------- */
.tds-flex--align-inline-start {
  justify-content: flex-start;
}
.tds-flex--align-inline-center {
  justify-content: center;
}
.tds-flex--align-inline-end {
  justify-content: flex-end;
}
/* In order for justify-content to work properly, child elements must have their flex unset */
.tds-flex--align-inline-start > .tds-flex-item,
.tds-flex--align-inline-center > .tds-flex-item,
.tds-flex--align-inline-end > .tds-flex-item {
  flex: unset;
}
/* Alignment per cell
--------------------------------------------------------------------------- */
.tds-flex-item--top {
  align-self: flex-start;
}
.tds-flex-item--bottom {
  align-self: flex-end;
}
.tds-flex-item--center {
  align-self: center;
}
/* Base classes for all media
--------------------------------------------------------------------------- */
.tds-flex--fit > .tds-flex-item {
  flex: 1;
}
@media (min-width: 600px) {
  .tds-flex--full > .tds-flex-item {
    flex: 0 0 100%;
  }

  .tds-flex--halfs > .tds-flex-item {
    flex: 0 0 50%;
  }

  .tds-flex--thirds > .tds-flex-item {
    flex: 0 0 33.3333%;
  }

  .tds-flex--quarters > .tds-flex-item {
    flex: 0 0 25%;
  }

  /* Large screens
  --------------------------------------------------------------------------- */
  .tds-flex--large_fit > .tds-flex-item {
    flex: 1;
  }

  .tds-flex--large_full > .tds-flex-item {
    flex: 0 0 100%;
  }

  .tds-flex--large_halfs > .tds-flex-item {
    flex: 0 0 50%;
  }

  .tds-flex--large_thirds > .tds-flex-item {
    flex: 0 0 33.3333%;
  }

  .tds-flex--large_quarters > .tds-flex-item {
    flex: 0 0 25%;
  }
}
/* --- Custom Layouts
--------------------------------------------------------------------------- */
.tds-flex--as_columns {
  flex-flow: column wrap;
}
/* TODO: I'm annoyed this isn't underscored to match with the utility class above */
.tds-flex--as-rows {
  display: flex;
  flex-flow: row wrap;
}
/* --- Custom Templates
--------------------------------------------------------------------------- */
.tds-layout-flex--two_columns.tds-layout-flex--sidemenu > .tds-flex-item:nth-child(1),
.tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left > .tds-flex-item:nth-child(1) {
  min-width: 70%;
}
.tds-layout-flex--three_columns.tds-layout-flex--sidemenu > .tds-flex-item:nth-child(1) {
  min-width: 60%;
}
.tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left > .tds-flex-item:nth-child(2),
.tds-layout-flex--three_columns.tds-layout-flex--sidemenu > .tds-flex-item:nth-child(2) {
  order: -1;
}
@media (max-width: 599px) {
  .tds-layout-flex--three_columns.tds-layout-flex--sidemenu > .tds-flex-item:nth-child(1),
  .tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left > .tds-flex-item:nth-child(1) {
    order: -1;
  }
}
@media (max-width: 599px) {
  .tds-flex-item {
    inline-size: 100%;
    min-width: 112px;
    flex: 100%;
  }

  .tds-flex-gutters {
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }

  .tds-flex-gutters .tds-flex-item {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}
.tds-layout-main {
  grid-area: main;
}
.tds-layout-aside {
  grid-area: aside--primary;
}
.tds-layout-aside + .tds-layout-aside {
  grid-area: aside--secondary;
}
/* -- Layout Helpers
---------------------------------------------------------------------------------------------------- */
.tds-layout.tds-layout--no_offset,
.tds-layout :is(.tds-layout, .tds-layout--no_offset) {
  -webkit-padding-end: 0;
          padding-inline-end: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}
.tds-layout--constrained,
.tds-layout--constrained_small {
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.tds-layout--constrained_small {
  max-inline-size: 840px;
}
.tds-layout--constrained {
  max-inline-size: 1440px;
}
/* -- Base Layout
---------------------------------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .tds-layout {
    -webkit-padding-end: var(--tds-size--3x);
            padding-inline-end: var(--tds-size--3x);
    -webkit-padding-start: var(--tds-size--3x);
            padding-inline-start: var(--tds-size--3x);
    transition: padding 150ms ease-in-out;
  }
}
@media (min-width: 600px) {
  .tds-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 0 var(--tds-size--3x);
    margin: auto;
    transition: padding 150ms ease-in-out;
  }
}
@media (min-width: 900px) {
  .tds-layout {
    -webkit-padding-end: var(--tds-size--5x);
            padding-inline-end: var(--tds-size--5x);
    -webkit-padding-start: var(--tds-size--5x);
            padding-inline-start: var(--tds-size--5x);
  }
}
/* -- One Column Layout
---------------------------------------------------------------------------------------------------- */
.tds-layout-item:first-child:last-child {
  grid-column: 1 / 13;
}
[class*='tds-layout-2col'] .tds-layout-aside {
  grid-area: aside;
}
.tds-layout-main--left .tds-layout-aside,
.tds-layout-main--right .tds-layout-main {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  transition: padding 250ms ease-in-out;
}
/* --- Two-Column Layouts ----------------------------------------------- */
.tds-layout-2col {
  grid-template: 1fr / repeat(2, 6fr);
}
.tds-layout-2col-has_main,
.tds-layout-2col-has_main--large,
.tds-layout-2col-spacious {
  grid-template: 1fr / repeat(12, 1fr);
}
.tds-layout-2col-has_main.tds-layout-main--left {
  grid-template-areas: 'main main main main main main main main aside aside aside aside';
}
.tds-layout-2col-has_main.tds-layout-main--right {
  grid-template-areas: 'aside aside aside aside main main main main main main main main';
}
.tds-layout-2col-has_main--large.tds-layout-main--left {
  grid-template-areas: 'main main main main main main main main main aside aside aside';
}
.tds-layout-2col-has_main--large.tds-layout-main--right {
  grid-template-areas: 'aside aside aside main main main main main main main main main';
}
/* --- Two-Column Layouts | Static Sidebar ------------------------------ */
.tds-layout-2col-static_sidebar.tds-layout-main--left {
  grid-template: 'main aside' 1fr / 10fr minmax(204px, 2fr);
}
.tds-layout-2col-static_sidebar.tds-layout-main--right {
  grid-template: 'aside main' 1fr / minmax(204px, 2fr) 10fr;
}
.tds-layout-2col-static_sidebar--large.tds-layout-main--left {
  grid-template: 'main aside' 1fr / 9fr minmax(318px, 3fr);
}
.tds-layout-2col-static_sidebar--large.tds-layout-main--right {
  grid-template: 'aside main' 1fr / minmax(318px, 3fr) 9fr;
}
/* --- Two-Column Layouts | Spacious ------------------------------------ */
@media (min-width: 600px) {
  .tds-layout-main--left .tds-layout-aside,
  .tds-layout-main--right .tds-layout-main {
    -webkit-padding-start: 24px;
            padding-inline-start: 24px;
  }

  .tds-layout-2col-spacious.tds-layout-main--left .tds-layout-aside,
  .tds-layout-2col-spacious.tds-layout-main--right .tds-layout-main,
  .tds-layout-2col-content_heavy.tds-layout-main--left .tds-layout-aside,
  .tds-layout-2col-content_heavy.tds-layout-main--right .tds-layout-main {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}
@media (min-width: 900px) {
  .tds-layout-2col-spacious.tds-layout-main--left {
    grid-template-areas: '. main main main main main main . aside aside aside .';
  }

  .tds-layout-2col-spacious.tds-layout-main--right {
    grid-template-areas: '. aside aside aside . main main main main main main .';
  }

  .tds-layout-2col-content_heavy.tds-layout-main--left {
    grid-template: '. . main aside' 1fr / 1fr 1fr 7fr minmax(-webkit-min-content, 318px);
    grid-template: '. . main aside' 1fr / 1fr 1fr 7fr minmax(min-content, 318px);
  }

  .tds-layout-2col-content_heavy.tds-layout-main--right {
    grid-template: 'aside main . . ' 1fr / minmax(-webkit-min-content, 318px) 7fr 1fr 1fr;
    grid-template: 'aside main . . ' 1fr / minmax(min-content, 318px) 7fr 1fr 1fr;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .tds-layout-2col-spacious.tds-layout-main--left {
    grid-template-areas: 'main main main main main main main aside aside aside aside aside';
  }

  .tds-layout-2col-spacious.tds-layout-main--right {
    grid-template-areas: 'aside aside aside aside aside main main main main main main main';
  }

  .tds-layout-2col-spacious.tds-layout-main--left .tds-layout-aside,
  .tds-layout-2col-spacious.tds-layout-main--right .tds-layout-main {
    -webkit-padding-start: 24px;
            padding-inline-start: 24px;
  }

  .tds-layout-2col-content_heavy.tds-layout-main--left {
    grid-template: 'main aside' 1fr / 9fr minmax(-webkit-min-content, 318px);
    grid-template: 'main aside' 1fr / 9fr minmax(min-content, 318px);
  }

  .tds-layout-2col-content_heavy.tds-layout-main--right {
    grid-template: 'aside main' 1fr / minmax(-webkit-min-content, 318px) 9fr;
    grid-template: 'aside main' 1fr / minmax(min-content, 318px) 9fr;
  }
}
.tds-layout-3col,
.tds-layout-3col-has_main,
.tds-layout-3col-has_main--large {
  grid-template-areas: 'aside--primary main aside--secondary';
}
.tds-layout-3col {
  grid-template: 1fr / repeat(3, 4fr);
}
.tds-layout-3col-has_main,
.tds-layout-3col-has_main--large {
  grid-template: 1fr / repeat(12, 1fr);
}
.tds-layout-3col-has_main .tds-layout-main {
  grid-column: 4 / 10;
}
.tds-layout-3col-has_main .tds-layout-aside + .tds-layout-aside {
  grid-column: 10 / 13;
}
.tds-layout-3col-has_main .tds-layout-main + .tds-layout-aside {
  grid-column: 1 / 4;
}
.tds-layout-3col-has_main--large .tds-layout-main {
  grid-column: 3 / 11;
}
.tds-layout-3col-has_main--large .tds-layout-aside + .tds-layout-aside {
  grid-column: 11 / 13;
}
.tds-layout-3col-has_main--large .tds-layout-main + .tds-layout-aside {
  grid-column: 1 / 3;
}
.tds-layout-3col-has_main--inset .tds-layout-main {
  grid-column: 4 / 10;
}
.tds-layout-3col-has_main--inset .tds-layout-aside + .tds-layout-aside {
  grid-column: 10 / 12;
}
.tds-layout-3col-has_main--inset .tds-layout-main + .tds-layout-aside {
  grid-column: 2 / 4;
}
.tds-layout-3col-has_main--spread .tds-layout-main {
  grid-column: 4 / 10;
}
.tds-layout-3col-has_main--spread .tds-layout-aside + .tds-layout-aside {
  grid-column: 11 / 13;
}
.tds-layout-3col-has_main--spread .tds-layout-main + .tds-layout-aside {
  grid-column: 1 / 3;
}
.tds-layout--4col {
  grid-template-columns: repeat(4, 1fr);
}
/* --- Checkerboard ----------------------------------------------------- */
@media (min-width: 600px) {
  .tds-layout-checkerboard {
    grid-template: 'checkboard--row' 1fr / 1fr;
    grid-gap: 0;
  }

  .tds-layout-checkerboard .tds-layout-item {
    display: grid;
    grid-template: 'checkerboard-asset checkerboard-caption' 1fr / 1fr 1fr;
    justify-content: center;
    align-content: center;
    align-items: stretch;
  }

  .tds-layout-checkerboard .tds-layout-checkerboard--caption {
    grid-area: checkerboard-caption;
    -webkit-padding-start: var(--tds-size--8x);
            padding-inline-start: var(--tds-size--8x);
    -webkit-padding-end: var(--tds-size--8x);
            padding-inline-end: var(--tds-size--8x);
    place-self: center stretch;
    text-align: start;
  }

  .tds-layout-checkerboard .tds-layout-item:nth-child(odd) {
    grid-template-areas: 'checkerboard-caption checkerboard-asset';
  }

  .tds-layout-checkerboard .tds-layout-item:nth-child(even) {
    grid-template-areas: 'checkerboard-asset checkerboard-caption';
  }

  .tds-layout-checkerboard .tds-layout-item:nth-child(odd) .tds-layout-checkerboard--caption {
    text-align: end;
  }
}
.tds-layout-checkerboard .tds-layout-checkboard--asset {
  display: block;
  grid-area: checkerboard-asset;
  inline-size: 100%;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
/*
Shell
--------------
Intended for use as the whole page template and as such will include the following
  - Full-width header (i.e. masthead) - sticky or non
  - Layouts of various kinds
  - Full-width footer - sticky or non
*/
/* TODO: when site-header is redesigned, shell will likely need to be revisited */
:root,
.tds-component-preview {
  --tds-shell-footer-height: 52px;
  --tds-shell-header-height: 52px;
}
.tds-shell {
  --tds-shell-content-height:
    calc(
      100vh - var(--tds-shell-header-height) - var(--tds-shell-footer-height)
    );

  display: grid;
  grid-gap: 0 24px;
  grid-template-columns: auto;
  grid-template-rows: var(--tds-shell-header-height) 1fr var(--tds-shell-footer-height);
  min-block-size: 100vh;
  min-block-size: -webkit-fill-available; /* stylelint-disable-line value-no-vendor-prefix */

  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  grid-template-areas: 'tds-shell-masthead' 'tds-shell-content' 'tds-shell-footer';
}
.tds-shell-masthead,
.tds-shell-footer {
  display: flex;
  flex-flow: row nowrap;
}
.tds-shell-masthead {
  grid-area: tds-shell-masthead;
}
.tds-shell-masthead--is_sticky,
.tds-shell-footer--is_sticky {
  position: -webkit-sticky;
  position: sticky;
}
.tds-shell-masthead--is_sticky {
  top: 0;
}
.tds-shell-footer--is_sticky {
  bottom: 0;
}
.tds-shell-footer {
  grid-area: tds-shell-footer;
}
.tds-shell-footer .tds-footer-nav {
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
.tds-shell-content {
  grid-area: tds-shell-content;
  min-block-size: var(--tds-shell-content-height);
}
a {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
button.tds-link {
  display: inline;
  line-height: initial;
}
.tds-link {
  --tds-link--icon-margin: calc((var(--tds-icon--size) + var(--tds-size--half)) * -1);

  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  background-color: transparent;
  text-align: initial;
  color: var(--tds-text--color);
  font-family: var(--tds-font-family--combined);
  transition: box-shadow 0.33s var(--tds-bezier), color 0.33s ease;
  box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor;
}
.tds-link:is(:hover, .tds--hover):not(.tds-link--primary, .tds-link--vertical, [disabled], .tds--disabled) {
  box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor;
  color: var(--tds-color--secondary);
}
.tds-link:is(:focus, :active, .tds--focus, .tds--active):not([disabled], .tds--disabled) {
  outline: 1px dotted currentColor;
}
.tds-link:is([disabled], .tds--disabled) {
  cursor: not-allowed;
}
/* Variants */
.tds-link--secondary {
  --tds-text--color: var(--tds-text--color--light);

  box-shadow: 0 0 0 0 transparent;
  font-weight: var(--tds-font-weight--medium, 500);
}
.tds-link--secondary:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
  --tds-text--color: var(--tds-text--color);
}
.tds-link--primary {
  --tds-text--color: var(--tds-text--color--primary);

  box-shadow: 0 0 0 0 transparent;
  font-weight: var(--tds-font-weight--medium, 500);
}
.tds-link--primary:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
  --tds-text--color: var(--tds-color--primary-highlight);

  box-shadow: 0 0 0 0 transparent;
}
.tds-link--vertical {
  box-shadow: 0 0 0 0 transparent;
  -webkit-padding-start: var(--tds-size--half);
          padding-inline-start: var(--tds-size--half);
}
.tds-link--vertical:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
  box-shadow: -4px 0 0 0 currentColor;
}
[dir='rtl'] .tds-link--vertical:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
  box-shadow: 4px 0 0 0 currentColor;
}
/* Icon support */
.tds-link--icon-leading {
  -webkit-margin-start: 28px;
          margin-inline-start: 28px;
}
.tds-link--icon-trailing {
  -webkit-margin-end: 28px;
          margin-inline-end: 28px;
}
:is(.tds-link, .tds-link--icon-leading, .tds-link--icon-trailing) > :is(.tds-icon--inline,.tds-icon) {
  position: absolute;
  top: -4px;
}
.tds-link > .tds-icon--inline:first-child,
.tds-link--icon-leading > .tds-icon {
  left: var(--tds-link--icon-margin);
}
.tds-link > .tds-icon--inline:last-child,
.tds-link--icon-trailing > .tds-icon {
  right: var(--tds-link--icon-margin);
}
[dir='rtl'] .tds-link > .tds-icon--inline:first-child,
[dir='rtl'] .tds-link--icon-leading > .tds-icon {
  left: unset;
  right: var(--tds-link--icon-margin);
}
[dir='rtl'] .tds-link > .tds-icon--inline:last-child,
[dir='rtl'] .tds-link--icon-trailing > .tds-icon {
  left: var(--tds-link--icon-margin);
  right: unset;
}
/* List */
.tds-list {
  --tds-list--separator-color: var(--tds-color--secondary-accent);
  --tds-list--timeline-color: var(--tds-text--color);
  --tds-list-item--margin-block: var(--tds-size--1x);
  --tds-list-item--padding-inline: 0;

  list-style-type: none;
  margin: 0;
  padding: 0;
}
/* Variants */
.tds-list--ordered,
.tds-list--unordered,
.tds-list--padded,
.tds-list--timeline {
  --tds-list-item--padding-inline: var(--tds-size--half);

  -webkit-padding-start: var(--tds-size--3x);

          padding-inline-start: var(--tds-size--3x);
}
.tds-list--ordered {
  list-style-type: decimal;
}
.tds-list--unordered {
  list-style-type: disc;
}
.tds-list--align-end {
  list-style-type: none;
  text-align: end;
}
.tds-list--borders {
  --tds-list-item--margin-block: var(--tds-size--2x);
}
.tds-list--small-borders {
  --tds-list-item--margin-block: var(--tds-size--3x);
}
.tds-list--timeline {
  --tds-list-item--margin-block: var(--tds-size--2x);
  --tds-list-item--padding-inline: 12px;
}
/* Modifiers */
.tds-list--light {
  --tds-list--timeline-color: var(--tds-color--secondary-accent);
}
.tds-list--caption {
  --tds-list--timeline-color: var(--tds-color--secondary-accent);
  --tds-list-item--margin-block: var(--tds-size--half);

  font-size: 12px;
}
/* List Items */
.tds-list > li {
  -webkit-padding-end: var(--tds-list-item--padding-inline);
          padding-inline-end: var(--tds-list-item--padding-inline);
  -webkit-padding-start: var(--tds-list-item--padding-inline);
          padding-inline-start: var(--tds-list-item--padding-inline);
  position: relative;
}
/* Horizontal */
.tds-list--horizontal > li {
  display: inline-block;
}
.tds-list--light > li,
.tds-list--caption > li {
  color: var(--tds-text--color--light);
}
.tds-list > li:not(:last-of-type) {
  -webkit-margin-after: var(--tds-list-item--margin-block);
          margin-block-end: var(--tds-list-item--margin-block);
}
@media (min-width: 600px) {
  .tds-list--horizontal > li:not(:last-of-type) {
    /* Copy the extra space the line-height creates in the vertical margin */
    -webkit-margin-after: 0;
            margin-block-end: 0;
    -webkit-margin-end: calc(var(--tds-list-item--margin-block) + 0.5em);
            margin-inline-end: calc(var(--tds-list-item--margin-block) + 0.5em);
  }
}
/*
 * Positioning for an icon if it's present at the beginning of an item
 * Small icons need shifting a smidge more than default icons
 *
 * Since the quiet space for both small and default icon sizes is
 * identical (-1px), we can rely on a hard-coded value.
 *
 * Providing a custom property such that consumers can tap into the positioning of the icon if the default
 * styling does not quiet fit their exact needs.
 */
.tds-list > li > .tds-icon:first-child {
  --tds-icon--list-inset: calc((var(--tds-size--3x) / 2 * -1) - (var(--tds-icon--size) / 2) - 1px);

  position: absolute;
  left: var(--tds-icon--list-inset);
  top: calc(var(--tds-size--1x) + 2px);
  transform: translateY(-50%);
  z-index: 1;
  background-color: var(--tds-scrim--background, var(--tds-color--inverse));
  transition: background-color 0.3s ease;
}
[dir='rtl'] .tds-list > li > .tds-icon:first-child {
  left: auto;
  right: var(--tds-icon--list-inset);
}
/* Separator Types */
.tds-list--borders > li::before,
.tds-list--small-borders > li::before,
.tds-list > li.tds-list-item--separated::before {
  background-color: var(--tds-list--separator-color);
  block-size: 1px;
  content: '';
  display: block;
}
.tds-list--borders > li::before {
  -webkit-margin-after: var(--tds-list-item--margin-block);
          margin-block-end: var(--tds-list-item--margin-block);
}
.tds-list--small-borders > li::before {
  -webkit-margin-after: calc(var(--tds-list-item--margin-block) / 2);
          margin-block-end: calc(var(--tds-list-item--margin-block) / 2);
  max-inline-size: var(--tds-size--4x);
}
.tds-list > li.tds-list-item--separated::before {
  -webkit-margin-after: var(--tds-list-item--margin-block);
          margin-block-end: var(--tds-list-item--margin-block);
}
/* Timeline */
.tds-list--timeline > li::before,
.tds-list--timeline > li:not(:last-of-type)::after {
  background-color: currentColor;
  content: '';
  left: -14px;
  position: absolute;
  top: 0.5em;
}
.tds-list--timeline > li::before {
  block-size: var(--tds-size--1x);
  border-radius: var(--tds-size--1x);
  inline-size: var(--tds-size--1x);
  -webkit-margin-start: -3px;
          margin-inline-start: -3px;
}
.tds-list--timeline > li:not(:last-of-type)::after {
  block-size: calc(100% + var(--tds-list-item--margin-block));
  display: block;
  inline-size: 2px;
}
[dir='rtl'] .tds-list--timeline > li::before,
[dir='rtl'] .tds-list--timeline > li:not(:last-of-type)::after {
  left: auto;
  right: -14px;
}
.tds-loader {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  background-color: var(--tds-color--scrim--semitransparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.tds-loader--show {
  opacity: 1;
  pointer-events: inherit;
}
.tds-loader .tds-icon {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}
.tds-loader .tds-icon-loader {
  --tds-icon--size: var(--tds-size--6x);

  -webkit-animation: var(--tds--rotating);

          animation: var(--tds--rotating);
  opacity: var(--tds-opacity--70);
}
.tds-loader .tds-icon-logo {
  -webkit-animation: var(--tds--pulsing);
          animation: var(--tds--pulsing);
  color: var(--tds-text--color--light);
}
.tds-locale-selector {
  display: flex;
  inline-size: 100%;
  justify-content: center;
  margin: auto;
  max-inline-size: 1260px;
  padding: 0 var(--tds-size--2x);
}
.tds-locale-selector--narrow {
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
}
.tds-locale-selector-trigger {
  display: flex;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.33s ease;
}
.tds-locale-selector-column {
  inline-size: 100%;
  margin: 0 auto;
  max-inline-size: 700px;
}
.tds-locale-selector-superregion {
  padding: 0 12px var(--tds-size--3x);
}
.tds-locale-selector-region {
  -moz-column-count: 2;
       column-count: 2;
  -moz-column-gap: var(--tds-size--2x);
       column-gap: var(--tds-size--2x);
  -webkit-margin-end: -12px;
          margin-inline-end: -12px;
  -webkit-margin-start: -12px;
          margin-inline-start: -12px;
}
.tds-locale-selector-region h3 {
  -webkit-padding-after: 12px;
          padding-block-end: 12px;
  -webkit-padding-before: var(--tds-size--2x);
          padding-block-start: var(--tds-size--2x);
}
/* Narrow variant (always-mobile/single-column layout) */
.tds-locale-selector--narrow .tds-locale-selector-region {
  -moz-column-count: 1;
       column-count: 1;
}
/* Match header bottom padding to card padding */
.tds-site-header-modal .tds-locale-selector h3 {
  -webkit-padding-after: 12px;
          padding-block-end: 12px;
  -webkit-padding-before: var(--tds-size--2x);
          padding-block-start: var(--tds-size--2x);
}
.tds-locale-selector--narrow .tds-locale-selector-column:first-child .tds-locale-selector-superregion:first-child > h3 {
  -webkit-padding-before: 0;
          padding-block-start: 0;
}
.tds-locale-selector-country {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  flex-flow: row wrap;
  transition: background-color 0.33s ease;
}
.tds-locale-selector-country:not(:last-child) {
  -webkit-margin-after: var(--tds-size--half);
          margin-block-end: var(--tds-size--half);
}
/* Override default card background */
.tds-card.tds-locale-selector-trigger,
.tds-card.tds-locale-selector-country {
  background-color: transparent;
  border-radius: 12px;
}
.tds-card.tds-locale-selector-trigger .tds-card-body,
.tds-card.tds-locale-selector-country {
  padding: var(--tds-size--1x) 12px;
}
.tds-card.tds-locale-selector-trigger .tds-card-body {
  -webkit-padding-start: var(--tds-size--1x);
          padding-inline-start: var(--tds-size--1x);
}
.tds-card.tds-locale-selector-trigger .tds-icon {
  -webkit-margin-before: calc(var(--tds-size--1x) - 2px);
          margin-block-start: calc(var(--tds-size--1x) - 2px);
  -webkit-margin-start: 12px;
          margin-inline-start: 12px;
}
.tds-locale-selector-trigger:focus {
  outline: none;
}
.tds--indicate-focus .tds-locale-selector-trigger:focus {
  outline: var(--tds-outline--focus);
}
/* Make sure hover states don't get confusing on touch devices */
@media (hover: hover) {
  .tds-card.tds-locale-selector-trigger:hover,
  .tds-card.tds-locale-selector-country:hover {
    background-color: var(--tds-color--tertiary);
  }
}
.tds-card.tds-locale-selector-country--selected {
  background-color: var(--tds-color--tertiary);
}
.tds-locale-selector-language {
  font-size: 12px;
  -webkit-margin-before: 2px;
          margin-block-start: 2px;
}
.tds-locale-selector-language:not(:last-child) {
  -webkit-margin-end: var(--tds-size--2x);
          margin-inline-end: var(--tds-size--2x);
}
.tds-locale-selector-language--selected {
  color: var(--tds-color--secondary);
  pointer-events: none;
}
/* Custom breakpoint based on columns */
@media (max-width: 1240px) {
  .tds-locale-selector {
    flex-direction: column;
    justify-content: flex-start;
  }
}
@media (max-width: 599px) {
  .tds-locale-selector-region {
    -moz-column-count: 1;
         column-count: 1;
  }

  .tds-locale-selector-column:first-child .tds-locale-selector-superregion:first-child > h3 {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}
.tds-lang--ja,
.tds-lang--zh,
.tds-lang--ko,
.tds-country--cn,
.tds-country--tw,
.tds-country--jp,
.tds-country--kr {
  --tds-heading--font-weight: 700;
}
.tds-card.tds-locale-selector-country .tds-text--h6 {
  inline-size: 100%;
}
.tds-card.tds-locale-selector-country > .tds-list {
  margin: 0;
}
.tds-media-player {
  --tds-media-player--color: var(--tds-color--white, #fff);

  visibility: hidden;
}
.tds-media-player.ready {
  visibility: visible;
}
.tds-media-player-range {
  --tds-form-item--grid-template-areas: 'label caption input feedback';

  align-items: center;
  grid-template-columns: -webkit-min-content 0 1fr 0;
  grid-template-columns: min-content 0 1fr 0;
  grid-template-rows: unset;
}
.tds-media-player-range .tds-form-label-wrap {
  --tds-form-label--color: var(--tds-media-player--color, #fff);

  -webkit-padding-end: 12px;

          padding-inline-end: 12px;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}
.tds-media-player .tds-icon {
  --tds-icon--size: 28px;

  fill: var(--tds-media-player--color, #fff);
}
.tds-media-player .tds-icon > g { display: none; }
.tds-media-player [aria-pressed='false'] .tds-icon > g:first-of-type { display: initial; }
.tds-media-player [aria-pressed='true'] .tds-icon:not(.tds-icon-speaker) > g:last-of-type { display: initial; }
.tds-media-player [aria-pressed='true'] .tds-icon.tds-icon-speaker--low > g:not(:first-of-type, :last-of-type) { display: initial; }
.tds-media-player [aria-pressed='true'] .tds-icon.tds-icon-speaker--high > g:is(:last-of-type) { display: initial; }
/**
 * tds-modals core styles
 * - Import this file only if you are running your own css post-processor and know what you're doing.
 */
.tds-modal--is-open {
  overflow: hidden;
}
/* Core Modal */
.tds-modal {
  --tds-modal-border-radius: var(--tds-size--1x);

  block-size: var(--tds-modal--height);
  bottom: 0;
  display: flex;
  flex-direction: column;
  inline-size: var(--tds-modal--width);
  left: 0;
  position: fixed;
  right: 0;

  /* Note: -webkit-fill-available does not work inside a calc rule */
  background-color: var(--tds-dialog--background-color);
  border: none;
  border-radius: var(--tds-modal-border-radius) var(--tds-modal-border-radius) 0 0;
  box-shadow: var(--tds-box-shadow--large-reverse);
  color: var(--tds-text--color);
  max-block-size: calc(100% - var(--tds-size--3x));
  overflow-y: auto;
  padding: 0;
  z-index: 1000;

  /* Only works in some cases, kept for future-proofing: AWSM-4162 */
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}
/* Variants */
.tds-modal--fullscreen,
.tds-modal--sheet-left,
.tds-modal--sheet-right {
  --tds-modal--height: 100vh;

  border-radius: 0;
  bottom: 0;
  max-block-size: 100vh;
  min-block-size: 100vh;
  top: 0;
}
@media (hover: hover) {
  .tds-modal--fullscreen,
  .tds-modal--sheet-left,
  .tds-modal--sheet-right {
    max-block-size: -webkit-fill-available;
  }
}
.tds-modal--fullscreen {
  --tds-modal--width: 100vw;

  max-inline-size: 100vw;
}
.tds-modal--sheet-left,
.tds-modal--sheet-right {
  --tds-modal--width: 414px;

  max-inline-size: calc(100vw - var(--tds-size--6x));
}
.tds-modal--sheet-small {
  --tds-modal--width: 311px;
}
/* stylelint-disable no-descending-specificity */
.tds-modal--sheet-left,
[dir='rtl'] .tds-modal--sheet-right {
  left: 0;
  right: auto;
}
.tds-modal--sheet-right,
[dir='rtl'] .tds-modal--sheet-left {
  left: auto;
  right: 0;
}
/* stylelint-enable no-descending-specificity */
/* Closed State */
.tds-modal:not([open]) {
  opacity: 0;
  transform: translateX(0) translateY(50%);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier), visibility 0s 0.5s;
}
.tds-modal--fullscreen:not([open]) {
  transform: translateX(0) translateY(50%);
}
/* stylelint-disable no-descending-specificity */
.tds-modal--sheet-left:not([open]),
[dir='rtl'] .tds-modal--sheet-right:not([open]) {
  transform: translateX(-50%) translateY(0);
}
.tds-modal--sheet-right:not([open]),
[dir='rtl'] .tds-modal--sheet-left:not([open]) {
  transform: translateX(50%) translateY(0);
}
/* stylelint-enable no-descending-specificity */
/* Open State */
.tds-modal[open] {
  opacity: 1;
  transform: translateX(0) translateY(0);
  pointer-events: inherit;
  visibility: inherit;
  transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier), visibility 0s 0s;
}
@media (max-width: 599px) {
  :root,
  .tds-component-preview {
    --tds-modal--height: auto;
    --tds-modal--width: 100vw;
  }

  .tds-modal {
    min-block-size: 25vh;
  }
}
@media (min-width: 600px) {
  :root,
  .tds-component-preview {
    --tds-modal--height: auto;
    --tds-modal--width: 772px;
  }

  .tds-modal {
    --tds-modal-border-radius: var(--tds-size--2x);

    bottom: 50%;
    margin: auto;
    max-inline-size: calc(100vw - var(--tds-size--12x));
    min-block-size: var(--tds-size--8x);
    max-block-size: calc(100% - var(--tds-size--12x));
    border-radius: var(--tds-modal-border-radius);
    box-shadow: var(--tds-box-shadow--large);
  }

  .tds-modal--fullscreen,
  .tds-modal--sheet-left,
  .tds-modal--sheet-right {
    border-radius: 0;
    max-block-size: 100vh;
    bottom: 0;
  }

  .tds-modal--fullscreen {
    max-inline-size: 100vw;
  }

  .tds-modal:not([open]) {
    transform: translateX(0) translateY(100%);
  }

  /* stylelint-disable no-descending-specificity */
  .tds-modal--sheet-left:not([open]),
  [dir='rtl'] .tds-modal--sheet-right:not([open]) {
    transform: translateX(-50%) translateY(0);
  }

  .tds-modal--sheet-right:not([open]),
  [dir='rtl'] .tds-modal--sheet-left:not([open]) {
    transform: translateX(50%) translateY(0);
  }

  /* stylelint-enable no-descending-specificity */

  .tds-modal[open] {
    transform: translateX(0) translateY(50%);
  }

  .tds-modal--fullscreen[open],
  .tds-modal--sheet-left[open],
  .tds-modal--sheet-right[open] {
    transform: translateX(0) translateY(0);
  }
}
/* Modal Backdrop */
dialog.tds-modal::-webkit-backdrop {
  display: none !important;
}
dialog.tds-modal::backdrop {
  display: none !important;
}
:root,
.tds-component-preview {
  --tds-modal-backdrop--rgb: 0, 0, 0;
}
.tds-modal-backdrop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  inline-size: 120vw;
  block-size: 120vh;
  background-color: rgba(var(--tds-modal-backdrop--rgb), var(--tds-modal-backdrop--opacity));
  z-index: 999;
  transition: background-color 0.5s ease, -webkit-backdrop-filter 0.5s ease;
  transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
  transition: background-color 0.5s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
}
.tds-modal:not([open]) + .tds-modal-backdrop {
  --tds-modal-backdrop--opacity: 0;

  -webkit-backdrop-filter: blur(0);

          backdrop-filter: blur(0);
  pointer-events: none;
}
.tds-modal[open] + .tds-modal-backdrop {
  --tds-modal-backdrop--opacity: 0.3;

  -webkit-backdrop-filter: blur(4px);

          backdrop-filter: blur(4px);
  pointer-events: inherit;
}
/* Modal Actions */
.tds-modal-header {
  align-items: flex-start;
  background-color: var(--tds-dialog--background-color);
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: var(--tds-size--2x);
  -webkit-padding-start: var(--tds-size--3x);
          padding-inline-start: var(--tds-size--3x);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}
.tds-modal-close {
  padding: var(--tds-size--1x);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  z-index: 10;
  border-radius: var(--tds-border-radius--pill);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: background-color 0.33s ease;
}
[dir='rtl'] .tds-modal-close {
  left: 0;
  right: auto;
}
.tds-modal-close:hover {
  background-color: var(--tds-pill--blur-color);
}
.tds-modal-close:focus {
  outline: none;
}
.tds-modal-close:focus-visible {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
.tds--indicate-focus .tds-modal-close:focus {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
.tds-modal-close--over-image:hover {
  background-color: rgba(var(--tds-color--rgb-shade), 0.16);
}
.tds-modal-close--over-image .tds-modal-close-icon {
  color: var(--tds-color--inverse);
}
/* Header & Footer */
.tds-modal-header > :is(h1, h2, h3) {
  -webkit-padding-after: 0;
          padding-block-end: 0;
  transition: padding 0.33s var(--tds-bezier), font-size 0.33s var(--tds-bezier), line-height 0.33s var(--tds-bezier);
}
.tds-modal-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: calc(var(--tds-size--3x) * -1);
  padding: var(--tds-size--3x) var(--tds-size--3x) var(--tds-size--6x);
  background-color: var(--tds-dialog--background-color);
  transition: padding 0.33s var(--tds-bezier);
}
/* Shrink the header/footer when internally scrolling */
.tds-modal--scrolling .tds-modal-header > :is(h1, h2, h3) {
  font-size: var(--tds-font-size--40);
  line-height: var(--tds-line-height--50);
  -webkit-padding-before: var(--tds-size--1x);
          padding-block-start: var(--tds-size--1x);
}
/* Content */
.tds-modal-content {
  padding: 0 var(--tds-size--3x) var(--tds-size--6x);
}
.tds-modal--sheet-small .tds-modal-content {
  -webkit-padding-before: var(--tds-size--1x);
          padding-block-start: var(--tds-size--1x);
}
.tds-modal-content:not(:last-child) {
  -webkit-padding-after: 0;
          padding-block-end: 0;
}
@media (min-width: 600px) {
  .tds-modal-header {
    -webkit-padding-start: var(--tds-size--6x);
            padding-inline-start: var(--tds-size--6x);
  }

  .tds-modal-content,
  .tds-modal-footer {
    -webkit-padding-start: var(--tds-size--6x);
            padding-inline-start: var(--tds-size--6x);
    -webkit-padding-end: var(--tds-size--6x);
            padding-inline-end: var(--tds-size--6x);
  }

  .tds-modal--sheet-small .tds-modal-content,
  .tds-modal--sheet-small .tds-modal-footer {
    -webkit-padding-start: var(--tds-size--4x);
            padding-inline-start: var(--tds-size--4x);
    -webkit-padding-end: var(--tds-size--4x);
            padding-inline-end: var(--tds-size--4x);
  }
}
.tds-pagination {
  --pagination-primary--display: initial;
  --pagination-primary-select--margin-horiz: var(--tds-size--1x);
  --pagination-secondary--display: none;

  text-align: center;
}
.tds-pagination,
.tds-pagination-navigation {
  color: var(--tds-text--color);
  font-family: var(--tds-font-family--combined);
  font-weight: var(--tds-font-weight--medium);
}
.tds-pagination-navigation {
  line-height: initial;
}
/* TODO: combine with disabled in normalize.css in the Tonight release (AWSM-4915) */
.tds-pagination-navigation[aria-disabled='true'] {
  box-shadow: 0 0 0 transparent;
  cursor: not-allowed;
  opacity: var(--tds-opacity--50);
  pointer-events: none;
}
.tds-pagination select {
  background-color: transparent;
  border: 0;
  color: var(--tds-text--color);
  margin: auto;
}
@media (max-width: 599px) {
  .tds-pagination-primary > select {
    display: block;
    margin: var(--tds-size--1x) auto;
  }
}
.tds-pagination .tds-pagination-current {
  display: inline-block;
  position: relative;
}
.tds-pagination-primary .tds-pagination-current {
  margin: 0 var(--tds-size--1x);
}
/* TODO: This is unnecessarily specific in order to create the correct UI without breaking
the existing UI component. */
.tds-pagination .tds-pagination-current select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-padding-end: var(--tds-size--3x);
          padding-inline-end: var(--tds-size--3x);
  position: relative;
  z-index: 1;
}
.tds-pagination-primary .tds-pagination-current select {
  -webkit-padding-start: var(--tds-size--1x);
          padding-inline-start: var(--tds-size--1x);
}
.tds-pagination-secondary .tds-pagination-current select {
  -webkit-padding-start: var(--tds-size--half);
          padding-inline-start: var(--tds-size--half);
}
.tds-pagination .tds-pagination-current select:focus {
  outline: var(--tds-outline--focus);
}
.tds-pagination-primary .tds-pagination-current select:focus {
  outline-offset: 2px;
}
.tds-pagination .tds-pagination-current select + .tds-icon {
  position: absolute;
  right: var(--tds-size--half);

  /* Visual offset to align small down chevron to capital characters */
  pointer-events: none;
  top: calc(50% - 5px);
  z-index: 0;
}
@media (max-width: 599px) {
  /* Stop Zooming in on select elements */
  .tds-pagination select {
    font-size: var(--tds-size--2x);
  }
}
@media (min-width: 600px) {
  .tds-pagination-primary > select {
    margin: 0 var(--tds-size--2x);
  }

  .tds-pagination-primary .tds-pagination-current {
    margin: 0 var(--tds-size--2x);
  }
}
.tds-pagination-primary {
  display: var(--pagination-primary--display);
  justify-content: space-around;
}
.tds-pagination-secondary {
  display: var(--pagination-secondary--display);
  inline-size: -webkit-max-content;
  inline-size: -moz-max-content;
  inline-size: max-content;
  white-space: nowrap;
}
.tds-pagination-secondary--key_value {
  color: var(--pagination--key_value-color);
}
.tds-pagination-secondary--value {
  color: var(--tds-text--color);
}
.tds-pagination-navigation + .tds-pagination-navigation {
  -webkit-margin-start: var(--tds-size--3x);
          margin-inline-start: var(--tds-size--3x);
  position: relative;
}
.tds-pagination-navigation + .tds-pagination-navigation::before {
  background-color: var(--tds-color--secondary);
  block-size: 100%;
  content: '';
  display: block;
  inline-size: 1px;
  left: -14px;
  position: absolute;
  top: 0;
}
[dir='rtl'] .tds-pagination-navigation + .tds-pagination-navigation::before {
  left: auto;
  right: -14px;
}
@media (min-width: 900px) {
  .tds-pagination {
    --pagination-primary-select--margin-horiz: var(--tds-size--2x);

    display: flex;
    justify-content: space-between;
  }

  .tds-pagination-primary {
    --pagination-primary--display: initial;

    inline-size: 100%;
  }

  .tds-pagination-secondary {
    --pagination-secondary--display: initial;
  }

  .tds-pagination-secondary label {
    color: var(--tds-text--color);
  }

  .tds-pagination .tds-pagination-current select + .tds-icon {
    opacity: 1;
  }

  /* .tds-pagination .tds-pagination-current select + .tds-icon {
    right: var(--tds-size--1x);
    top: calc(50% - var(--tds-size--half));
  }
  .tds-pagination-current {
    display: inline-block;
    padding-inline-end: var(--tds-size--2x);
    position: relative;
  } */
}
/* TODO: All Pagination examples are set to font-size: 12px; / line-height: 24px;
   Resolve this in Tonight / Q4 / TDS 6 / AWSM-4928
*/
.tds-pagination--dense,
.tds-pagination--dense p {
  font-size: var(--tds-font-size--20);
  line-height: var(--tds-line-height--30);
}
@media (min-width: 900px) {
  .tds-pagination--dense {
    --pagination-primary-select--margin-horiz: var(--tds-size--2x);
  }
}
.tds-pagination--show-numbers .tds-pagination-primary {
  --pagination-primary--display: flex;

  justify-content: center;
}
.tds-pagination--show-numbers .tds-pagination-current {
  line-height: 16px;
  margin: 0 var(--pagination-primary-select--margin-horiz);
}
.tds-pagination--show-numbers .tds-pagination-secondary .tds-pagination-current {
  margin: 0;
}
.tds-pagination--show-numbers .tds-pagination-navigation {
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
.tds-selector {
  --tds-selector-font-color--selected: var(--tds-color--white);

  display: grid;
  grid-gap: var(--tds-size--1x) calc(var(--tds-size--1x) * 1.5);

  /* --tds-column-count available as an override for other classes (eg. date-filter) */
  grid-template-columns: repeat(var(--tds-column-count, auto-fill), var(--tds-column-width, minmax(200px, 1fr)));
  justify-items: stretch;
  -webkit-padding-after: var(--tds-size--1x);
          padding-block-end: var(--tds-size--1x);
}
:is(.tds-theme--replicant, .tds-theme--marketing) .tds-scrim--black .tds-selector,
.tds-scrim--black:is(.tds-theme--replicant, .tds-theme--marketing) .tds-selector {
  --tds-selector-font-color--selected: var(--tds-color--grey20);
}
.tds-selector--dense {
  --tds-height--pill: var(--tds-size--4x);
}
.tds-selector--col4 {
  --tds-column-count: 4;
  --tds-column-width: 1fr;
}
/* Options */
.tds-selector-input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.tds-selector-label {
  align-items: center;
  block-size: var(--tds-height--pill);
  border-radius: var(--tds-border-radius--pill);
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 0 calc(var(--tds-size--1x) * 1.5);
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tds-selector-label:hover {
  background-color: var(--tds-color--tertiary);
}
.tds-selector-input:checked + .tds-selector-label {
  background-color: var(--tds-color--primary);
  color: var(--tds-selector-font-color--selected);
  font-weight: var(--tds-font-weight--medium);
}
.tds-selector-input:checked + .tds-selector-label:hover {
  background-color: var(--tds-color--primary-highlight);
}
/* stylelint-disable */
.tds-selector-input:focus-visible + .tds-selector-label {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
/* While duplicating the line above, they cannot be combined */
.tds--indicate-focus .tds-selector-input:focus + .tds-selector-label {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
/* TODO: Refactor imports for site-header */
.tds-site-footer {
  font-size: var(--tds-font-size--20);
}
.tds-footer-nav {
  inline-size: 100%;
}
.tds-footer-nav > ul {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
.tds-site-footer--align_start .tds-footer-nav > ul {
  justify-content: flex-start;
}
.tds-footer-nav > ul > li {
  padding: var(--tds-size--half) 0;
}
.tds-footer-nav .tds-footer-item {
  color: var(--tds-text--color--light);
  font-family: var(--tds-font-family--combined);
  font-weight: var(--tds-font-weight--medium);
}
.tds-footer-item .tds-link:not(.tds--disabled):not(.tds-link--primary) {
  box-shadow: none;
  color: var(--tds-text--color--light);
}
.tds-footer-item .tds-link:not(.tds--disabled):not(.tds-link--primary):hover {
  box-shadow: none;
}
@media (min-width: 600px) {
  .tds-footer-nav > ul {
    flex-flow: row wrap;
  }

  .tds-footer-nav > ul > li {
    -webkit-padding-before: var(--tds-size--1x);
            padding-block-start: var(--tds-size--1x);
    -webkit-padding-after: var(--tds-size--1x);
            padding-block-end: var(--tds-size--1x);
  }

  .tds-footer-nav > ul > li:first-child {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }

  .tds-footer-nav > ul > li:last-child {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }
}
/* Header */
:root,
.tds-component-preview {
  --tds-site-header--height: 54px;
}
/** Header Alignment --
  * ---------------------------------------------------------- */
.tds-site-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}
.tds-site-header--sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.tds-site-header .tds-align--start {
  justify-content: flex-start;
  -webkit-padding-start: var(--tds-size--1x);
          padding-inline-start: var(--tds-size--1x);
}
.tds-site-header .tds-align--center {
  flex-grow: 1;
  justify-content: center;
  -webkit-padding-end: var(--tds-size--1x);
          padding-inline-end: var(--tds-size--1x);
  -webkit-padding-start: var(--tds-size--1x);
          padding-inline-start: var(--tds-size--1x);
}
.tds-site-header .tds-align--end {
  justify-content: flex-end;
  -webkit-padding-end: var(--tds-size--1x);
          padding-inline-end: var(--tds-size--1x);
}
@media (min-width: 600px) {
  /* Combines with logo and nav item padding to match 36px in the content container */
  .tds-site-header .tds-align--start {
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }

  .tds-site-header .tds-align--end {
    -webkit-padding-end: 20px;
            padding-inline-end: 20px;
  }
}
/* TODO: For MVP Site Header skips tablet layout */
@media (min-width: 1200px) {
  .tds-site-nav--flyout {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
  }

  .tds-site-nav--center {
    grid-area: center;
  }

  .tds-site-nav--end {
    grid-area: end;
  }

  .tds-site-header .tds-align--start {
    min-inline-size: 270px;
    -webkit-padding-start: var(--tds-size--4x);
            padding-inline-start: var(--tds-size--4x);
  }

  .tds-site-header .tds-align--end {
    min-inline-size: 270px;
    -webkit-padding-end: var(--tds-size--4x);
            padding-inline-end: var(--tds-size--4x);
  }
}
/* Specific spacing for SHL */
.tds-site-header-modal {
  -webkit-padding-after: var(--tds-size--6x);
          padding-block-end: var(--tds-size--6x);
}
.tds-site-header-modal .tds-modal-header {
  padding: 20px;
}
/** Nav Sections --
  * ---------------------------------------------------------- */
:root,
.tds-component-preview {
  --tds-site-nav--flyout-height: 0;
  --tds-site-nav--flyout-width: 312px;
}
.tds-site-nav--flyout:focus-within,
.tds-site-nav--flyout[aria-expanded='true'] {
  /* Resets the colors in case the header is using the dark colorscheme */
  --tds-color--primary: var(--tds-color--blue30);
  --tds-color--secondary: var(--tds-color--grey10);
  --tds-color--secondary-highlight: var(--tds-color--black);
  --tds-color--tertiary: var(--tds-color--grey70);
  --tds-text--color: var(--tds-color--grey20);
  --tds-text--color--light: var(--tds-color--grey30);
}
.tds-site-nav--flyout-backdrop {
  -webkit-backdrop-filter: blur(0);
          backdrop-filter: blur(0);
  background-color: transparent;
  bottom: 0;
  cursor: pointer;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: 0.5s ease;
  z-index: -5;
}
/* Performance enhancement
 * - This tells the browser that the flyout is likely to animate soon
 * - In Chrome, this sets aside dedicated resources to perform the animation
 * - so we only want to engage it when there's some kind of indication, like :focus-within */
.tds-site-header:hover .tds-site-nav--flyout-backdrop,
.tds-site-header:focus-within .tds-site-nav--flyout-backdrop {
  will-change: transform, backdrop-filter;
}
.tds-site-nav--flyout-backdrop[aria-expanded='true'] {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  background-color: rgba(128, 128, 128, 0.25);
  pointer-events: inherit;
  transform: translateX(0);
}
/* Flyout Nav for Mobile TODO: For MVP Site Header skips tablet layout */
@media (max-width: 599px), (min-width: 600px) and (max-width: 899px), (min-width: 900px) and (max-width: 1199px) {
  :root,
  .tds-component-preview {
    --tds-nav-controls-height: 80px;
    --tds-site-nav--flyout-width: 312px;
    --tds-site-nav--flyout-height: 0;
  }

  .tds-site-nav--flyout {
    --tds-nav-item--padding: var(--tds-size--2x);

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--tds-color--white);
    box-shadow: var(--tds-box-shadow--off);
    max-width: calc(100vw - var(--tds-size--5x));
    inline-size: var(--tds-site-nav--flyout-width);
    transform: translateX(var(--tds-site-nav--flyout-width));
    visibility: hidden;
    transition: transform 0.5s ease, visibility 0.5s;
    z-index: 110;
  }

  .tds-site-nav--flyout .tds-site-nav-item {
    --tds-nav-item--padding: var(--tds-size--2x);
  }

  .tds-site-nav--flyout .tds-site-nav-item--small {
    --tds-nav-item--padding: var(--tds-size--1x);
  }

  /* Performance enhancement
  * - This tells the browser that the flyout is likely to animate soon
  * - In Chrome, this sets aside dedicated resources to perform the animation
  * - so we only want to engage it when there's some kind of indication, like :focus-within */
  .tds-site-header:hover .tds-site-nav--flyout,
  .tds-site-header:focus-within .tds-site-nav--flyout {
    will-change: transform;
  }

  .tds-banner + .tds-site-header .tds-site-nav--flyout {
    top: var(--tds-site-banner--height);
  }

  .tds-site-nav--flyout-backdrop {
    z-index: 105;
  }

  /* Active State for the fly-out */
  .tds-site-nav--flyout[aria-expanded='true'] {
    box-shadow: var(--tds-box-shadow--large);
    transform: translateX(0);
    visibility: inherit;
    transition: transform 0.5s var(--tds-bezier), visibility 0s;
  }

  /* Panel controls for contents */
  .tds-site-nav-controls {
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content: space-between;
    align-items: center;
    padding: var(--tds-size--2x);
    block-size: var(--tds-nav-controls-height);
  }

  .tds-site-nav-controls .tds-site-nav-close {
    --tds-nav-item--padding: 0;
  }

  .tds-site-nav-controls .tds-icon.tds-icon-close {
    --tds-icon--size: var(--tds-size--5x);

    margin: 0;
  }

  /* Flyout contents */
  .tds-site-nav-content {
    position: absolute;
    top: var(--tds-nav-controls-height);
    left: 0;
    right: 0;
    bottom: 0;
  }

  /* Override for the locale-selector since it would normally have a 2-col tablet layout */
  .tds-site-nav-content .tds-locale-selector-region {
    -moz-column-count: 1;
         column-count: 1;
  }

  .tds-site-nav-content[data-tds-tier='1'] {
    overflow-y: auto;
  }

  .tds-site-nav-item[aria-expanded='false'],
  .tds-site-nav-content[aria-expanded='false'] {
    opacity: 0;
    transform: translateX(-24px);
    visibility: hidden;
    pointer-events: none;
    transition:
      color 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0.5s,
      -webkit-backdrop-filter 0.33s ease;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0.5s;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0.5s,
      -webkit-backdrop-filter 0.33s ease;
  }

  [data-tds-breadcrumb][aria-expanded='false'],
  .tds-site-nav-content[aria-expanded='true'] ~ .tds-site-nav-content[aria-expanded='false'] {
    transform: translateX(var(--tds-size--3x));
  }

  .tds-site-nav-item[data-tds-breadcrumb][aria-expanded='false'] {
    transition:
      color 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier) 0.125s,
      visibility 0s 0.5s,
      -webkit-backdrop-filter 0.33s ease;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier) 0.125s,
      visibility 0s 0.5s;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier) 0.125s,
      visibility 0s 0.5s,
      -webkit-backdrop-filter 0.33s ease;
  }

  .tds-site-nav-item[aria-expanded='true'],
  .tds-site-nav-content[aria-expanded='true'] {
    opacity: 1;
    transform: translateX(0);
    visibility: inherit;
    transition:
      color 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0s,
      -webkit-backdrop-filter 0.33s ease;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0s;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0s,
      -webkit-backdrop-filter 0.33s ease;
  }

  .tds-site-nav-item[data-tds-breadcrumb][aria-expanded='true'] {
    transition:
      color 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier) 0.125s,
      transform 0.5s var(--tds-bezier) 0.125s,
      visibility 0s 0s,
      -webkit-backdrop-filter 0.33s ease;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier) 0.125s,
      transform 0.5s var(--tds-bezier) 0.125s,
      visibility 0s 0s;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier) 0.125s,
      transform 0.5s var(--tds-bezier) 0.125s,
      visibility 0s 0s,
      -webkit-backdrop-filter 0.33s ease;
  }

  .tds-site-nav-content-block[aria-expanded='false'] {
    visibility: hidden;
  }

  .tds-site-nav-content-block[aria-expanded='true'] {
    visibility: inherit;
  }

  .tds-site-nav-content-block {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
  }

  .tds-site-nav--flyout .tds-site-nav-items {
    flex-flow: column;
    align-items: stretch;
    padding: 0 var(--tds-size--2x);
    margin: 0;
  }

  .tds-site-nav--flyout .tds-site-nav-items:last-child {
    -webkit-margin-after: var(--tds-size--8x);
            margin-block-end: var(--tds-size--8x);
  }

  .tds-site-nav-content .tds-site-nav-item {
    inline-size: 100%;
    outline: none;
  }

  .tds-site-nav-content img {
    max-width: 100%;
  }
}
/* Flyout Nav Hidden on non-mobile TODO: For MVP Site Header skips tablet layout */
@media (min-width: 1200px) {
  :root,
  .tds-component-preview {
    --tds-nav-controls-height: 48px;
  }

  .tds-site-nav--flyout {
    padding: 0;
    position: static;
    justify-content: flex-end;

    /* AWSM-3500 - Resolves a stacking context bug in Safari */
    z-index: -1;
  }

  .tds-site-nav--flyout .tds-site-nav-items {
    flex-flow: row nowrap;
  }

  .tds-site-nav-controls {
    position: absolute;
    top: var(--tds-site-header--height);
    left: var(--tds-size--1x);
  }

  .tds-site-nav--flyout[aria-expanded='false'] .tds-site-nav-controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s var(--tds-bezier), visibility 0s 0.5s;
  }

  .tds-site-nav--flyout[aria-expanded='true'] .tds-site-nav-controls {
    opacity: 1;
    visibility: inherit;
    pointer-events: inherit;
    transition: opacity 0.5s var(--tds-bezier), visibility 0s 0s;
  }

  .tds-site-nav-content {
    display: flex;
    flex-grow: 1;
  }

  .tds-site-nav-content[data-tds-tier='1'] {
    inline-size: 100%;
  }

  .tds-site-nav-content[data-tds-tier]:not([data-tds-tier='1']) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-height: calc(85vh - var(--tds-site-header--height));
    block-size: calc(var(--tds-site-nav--flyout-height) + var(--tds-site-header--height));
    background-color: var(--tds-color--white);
    box-shadow: var(--tds-box-shadow--large);
    z-index: -2;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-24px);
    visibility: hidden;
    transition:
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0.5s,
      height 0.5s var(--tds-bezier);
  }

  [data-tds-tier='1']:hover + .tds-site-nav-content[data-tds-tier]:not([data-tds-tier='1']),
  [data-tds-tier='1']:focus-within + .tds-site-nav-content[data-tds-tier]:not([data-tds-tier='1']),
  .tds-site-nav-content[data-tds-tier]:not([data-tds-tier='1'])[aria-expanded='true'] {
    opacity: 1;
    transform: translateY(0);
    visibility: inherit;
    transition:
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0s,
      height 0.5s var(--tds-bezier);
  }

  .tds-site-nav-content-block {
    position: absolute;
    top: var(--tds-site-header--height);
    left: 0;
    right: 0;
    padding: 0 var(--tds-size--2x);
    overflow-y: auto;
    max-height: calc(85vh - var(--tds-site-header--height) - var(--tds-site-header--height, 0));
  }

  [data-tds-breadcrumb][aria-expanded='false'],
  .tds-site-nav-content-block[aria-expanded='false'] {
    opacity: 0;
    transform: translateX(-24px);
    visibility: hidden;
    transition:
      color 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0.5s,
      -webkit-backdrop-filter 0.33s ease;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0.5s;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0.5s,
      -webkit-backdrop-filter 0.33s ease;
  }

  [data-tds-breadcrumb][aria-expanded='false'],
  .tds-site-nav-content-block[aria-expanded='true'] ~ .tds-site-nav-content-block[aria-expanded='false'] {
    transform: translateX(var(--tds-size--3x));
  }

  .tds-site-nav-content[aria-expanded='false'] > .tds-site-nav-content-block {
    transform: translateX(0);
  }

  [data-tds-breadcrumb][aria-expanded='true'],
  .tds-site-nav-content-block[aria-expanded='true'] {
    opacity: 1;
    transform: translateX(0);
    visibility: inherit;
    transition:
      color 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0s,
      -webkit-backdrop-filter 0.33s ease;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0s;
    transition:
      color 0.33s ease,
      backdrop-filter 0.33s ease,
      background-color 0.33s ease,
      opacity 0.5s var(--tds-bezier),
      transform 0.5s var(--tds-bezier),
      visibility 0s 0s,
      -webkit-backdrop-filter 0.33s ease;
  }
}
/** Header Logo + App Title --
  * ---------------------------------------------------------- */
.tds-site-logo {
  align-items: center;
  display: flex;
}
h1.tds-site-logo {
  padding: 0;
}
/* TODO: Remove after stable icons are complete */
.tds-icon.tds-site-logo-icon path {
  transition: fill 0.33s ease;
}
.tds-site-header > .tds-site-logo {
  min-block-size: var(--tds-site-header--height);
}
.tds-site-logo-link {
  box-shadow: none;
  display: inline-flex;
  padding: 0 var(--tds-size--1x);
}
.tds-site-header .tds-align--start .tds-site-logo-link {
  -webkit-padding-start: var(--tds-size--2x);
          padding-inline-start: var(--tds-size--2x);
}
/* App Title */
.tds-site-logo-link + .tds-site-app-title {
  -webkit-border-start: 1px solid var(--tds-color--secondary-highlight);
          border-inline-start: 1px solid var(--tds-color--secondary-highlight);
  font-size: var(--tds-font-size--20);
  letter-spacing: 0;
  line-height: var(--tds-line-height--20);
  padding: 0;

  /* added px to account for visual weight of logo */
  -webkit-margin-start: calc(var(--tds-size--1x) + 3px);
          margin-inline-start: calc(var(--tds-size--1x) + 3px);
  -webkit-padding-start: var(--tds-size--2x);
          padding-inline-start: var(--tds-size--2x);
}
@media (min-width: 600px) {
  .tds-site-logo-link + .tds-site-app-title {
    font-size: var(--tds-font-size--30);
    line-height: var(--tds-line-height--30);
  }
}
.tds-skip-to-content {
  font-size: var(--tds-font-size--20);
  line-height: 1.414;
  padding: var(--tds-size--1x);
  position: fixed;
  top: var(--tds-size--5x);
}
.tds-site-logo :focus {
  outline: none;
}
.tds-site-logo :focus-visible {
  outline: var(--tds-outline--focus);
}
.tds--indicate-focus .tds-site-logo :focus {
  outline: var(--tds-outline--focus);
}
/** Nav Items --
  * ---------------------------------------------------------- */
.tds-site-nav-item {
  --tds-nav-item--padding: var(--tds-size--1x);
  --tds-nav-item--width: auto;

  align-items: center;
  border-radius: 12px;
  color: var(--tds-nav-item--color);
  display: inline-flex;
  font-weight: var(--tds-font-weight--medium);
  inline-size: var(--tds-nav-item--width);
  min-block-size: var(--tds-size--4x);
  padding: var(--tds-size--half) var(--tds-size--1x);
  transition: color 0.33s ease, background-color 0.33s ease;
}
.tds-site-nav-items--vertical .tds-site-nav-item {
  inline-size: 100%;
}
.tds-site-nav-item.tds--highlighted {
  --tds-nav-item--color: var(--tds-color--secondary);

  -webkit-backdrop-filter: blur(var(--tds-blur--button));

          backdrop-filter: blur(var(--tds-blur--button));
  background-color: var(--tds-pill--blur-color);
}
@media (hover: hover) {
  .tds-site-nav-item:where(:not(.tds-site-nav-item--read-only)):hover {
    --tds-nav-item--color: var(--tds-color--secondary);

    -webkit-backdrop-filter: blur(var(--tds-blur--button));

            backdrop-filter: blur(var(--tds-blur--button));
    background-color: var(--tds-pill--blur-color);
  }
}
.tds-site-nav-item:focus {
  outline: none;
}
.tds-site-nav-item:focus-visible {
  outline: var(--tds-outline--focus);
}
.tds--indicate-focus .tds-site-nav-item:focus {
  outline: var(--tds-outline--focus);
}
/* Specific-Purpose nav items (menu & back links) */
.tds-modal-header .tds-nav-back {
  background: none;
  font-size: 12px;
  margin: 4px 0;

  /* Fix optical centering vertically */
  position: relative;
  top: 1px;
}
@media (max-width: 599px) {
  .tds-nav-menu {
    min-block-size: 28px;
    font-size: 12px;
    padding: 0 var(--tds-size--1x);
  }
}
/* Animated */
.tds-site-nav-item.tds-animate--backdrop {
  -webkit-backdrop-filter: unset;
          backdrop-filter: unset;
  background-color: transparent;
}
/* Properties to be set via js */
.tds-animate--backdrop-backdrop {
  -webkit-backdrop-filter: blur(var(--tds-blur--button));
          backdrop-filter: blur(var(--tds-blur--button));
  background-color: var(--tds-pill--blur-color);
  border-radius: 12px;
  display: block;
  position: absolute;

  /* TODO: AWSM-3345: split this into generic styles to go into tds-core vs here */

  /* Note: height and width can't default to zero, otherwise Safari will ignore the backdrop-filter on the first render */
  block-size: var(--tds-animate-backdrop-height, 1px);
  inline-size: var(--tds-animate-backdrop-width, 1px);

  /* left/right here are used by js to set posiioning, which ignores logical props */

  /* stylelint-disable-next-line */
  left: var(--tds-animate-backdrop-left, 0);

  /* stylelint-disable-next-line */
  top: var(--tds-animate-backdrop-top, 0);

  /* Note: Visibility needs to not have a default value here, otherwise it will override the tokenized value */
  visibility: var(--tds-animate-backdrop-visibility);
  opacity: var(--tds-animate-backdrop-opacity, 0);
  z-index: -1;
  transition: var(--tds-animate-backdrop-transition, opacity 0.5s ease, visibility 0s 0s);
}
.tds-site-nav-item-text {
  color: var(--tds-nav-item--color);
  margin: 0 var(--tds-size--1x);
  transition: color 0.33s ease;
}
.tds-site-nav-items--vertical .tds-site-nav-item-text {
  flex-grow: 1;
  margin: 0 var(--tds-size--half);
  text-align: start;
}
.tds-nav-back .tds-site-nav-item-text {
  margin: 0;
}
/* If there's only an icon, tighten up the space to create a square pill */
.tds-site-nav-item .tds-icon:only-child {
  -webkit-margin-end: -4px;
          margin-inline-end: -4px;
  -webkit-margin-start: -4px;
          margin-inline-start: -4px;
}
/** Nav Items --
  * ---------------------------------------------------------- */
.tds-site-nav-items {
  align-items: center;
  display: flex;
  margin: 0;
  transition: transform 0.5s ease;

  /* Handles the case where an animated backdrop is on the list, instead of a site-header */
  position: relative;
  z-index: 1;
}
.tds-site-header > .tds-site-nav-items {
  min-height: var(--tds-site-header--height);
  position: static;
}
.tds-site-nav-items--vertical {
  align-items: initial;
  flex-direction: column;
}
.tds-site-nav-items--vertical > li:not(:last-child) {
  -webkit-margin-after: var(--tds-size--1x);
          margin-block-end: var(--tds-size--1x);
}
/**
 * Status Message
 */
.tds-status_msg {
  --tds-card--gap: var(--tds-padding--card--dense);

  display: flex;
  margin: var(--tds-size--3x) 0;
}
/* Inner Elements */
.tds-status_msg-heading {
  padding: 0;
}
.tds-switch_toggle {
  --tds-switch_toggle--font-size: var(--tds-font-size--30);
  --tds-switch_toggle--size: 40px;
  --tds-switch_toggle-spacer: var(--tds-size--1x);
  --tds-switch_toggle--radius: calc(var(--tds-switch_toggle--size) / 2);

  align-items: center;
  display: flex;
  inline-size: -webkit-min-content;
  inline-size: -moz-min-content;
  inline-size: min-content;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tds-switch_toggle * {
  cursor: pointer;
}
.tds-switch_toggle--small {
  --tds-switch_toggle--font-size: var(--tds-font-size--20);
  --tds-switch_toggle--size: 32px;
}
.tds-switch_toggle--smaller {
  --tds-switch_toggle--font-size: var(--tds-font-size--10);
  --tds-switch_toggle--size: 30px;
}
.tds-switch_toggle-checkbox {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.tds-switch_toggle-track {
  display: block;
  position: relative;
  block-size: var(--tds-switch_toggle--size);
  inline-size: calc(var(--tds-switch_toggle--size) * 2);
  background-color: var(--tds-toggle--background-color);
  border-radius: var(--tds-switch_toggle--radius);
  transition: background-color 0.5s ease;
}
.tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-track {
  background-color: var(--tds-text--color--primary);
}
.tds-switch_toggle-checkbox:focus-visible + .tds-switch_toggle-track {
  outline: var(--tds-outline--focus);
  outline-offset: var(--tds-size--half);
}
.tds--indicate-focus .tds-switch_toggle-checkbox:focus + .tds-switch_toggle-track {
  outline: var(--tds-outline--focus);
  outline-offset: var(--tds-size--half);
}
.tds-switch_toggle-btn {
  font-size: var(--tds-switch_toggle--font-size);
  -webkit-margin-start: var(--tds-switch_toggle-spacer);
          margin-inline-start: var(--tds-switch_toggle-spacer);
  -webkit-margin-end: var(--tds-switch_toggle-spacer);
          margin-inline-end: var(--tds-switch_toggle-spacer);
  text-transform: none;
  color: var(--tds-color--secondary);
  transition: color 0.5s ease;
  line-height: 1;
}
.tds-switch_toggle-btn:nth-last-child(2) {
  order: -1;
}
.tds-switch_toggle--label_inside .tds-switch_toggle-btn {
  --tds-switch_toggle-btn--indent: 4px;
  --tds-switch_toggle-spacer: 0;

  align-items: center;
  block-size: 100%;
  display: flex;
  inline-size: calc(50% + var(--tds-switch_toggle-btn--indent));
  justify-content: center;
  position: absolute;
}
.tds-switch_toggle--small .tds-switch_toggle-btn,
.tds-switch_toggle--smaller .tds-switch_toggle-btn {
  --tds-switch_toggle-btn--indent: 1px;
}
.tds-switch_toggle--label_inside .tds-switch_toggle-btn:nth-last-child(2) {
  left: 2px;
}
.tds-switch_toggle--label_inside .tds-switch_toggle-btn:last-child {
  right: 2px;
}
.tds-switch_toggle--label_inside .tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-btn {
  color: var(--tds-color--white);
}
.tds-switch_toggle-track::after {
  /* Note:
   * In dark environments the default 'toggle' fill goes dark-grey
   * But for switches the fill gains a primary-colored background, making the default ugly
   */
  background-color: var(--tds-color--white);
  block-size: calc(var(--tds-switch_toggle--size) - var(--tds-size--1x));
  border-radius: var(--tds-switch_toggle--radius);
  box-shadow: var(--tds-box-shadow--small);
  content: '';
  display: block;
  inline-size: calc(var(--tds-switch_toggle--size) - var(--tds-size--1x));
  margin: var(--tds-size--half);
  position: absolute;
  transform: translateX(0);
  transition: transform 0.5s var(--tds-bezier), color 0.5s var(--tds-bezier);
  z-index: 10;
}
.tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-track::after {
  transform: translateX(var(--tds-switch_toggle--size));
}
[dir='rtl'] .tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-track::after {
  transform: translateX(calc(var(--tds-switch_toggle--size) * -1));
}
:root,
.tds-component-preview {
  --tds-table--vertical-align: middle;
  --tds-table-background-color: transparent;
  --tds-table-border_color: var(--tds-color--grey50);
  --tds-table-border_spacing: 0;
  --tds-table-border_width: 1px;
  --tds-table-caption-background-color: transparent;
  --tds-table-caption-top: 0;
  --tds-table-header-font_size: var(--tds-font-size--30);
  --tds-table-padding--horizontal: var(--tds-size--2x);
  --tds-table-padding--vertical: var(--tds-size--2x);
}
.tds-table--align_middle {
  --tds-table--vertical-align: middle;
}
.tds-table--align_top {
  --tds-table--vertical-align: top;
}
.tds-table--align_bottom {
  --tds-table--vertical-align: bottom;
}
.tds-table {
  border-collapse: collapse;
  border-spacing: var(--tds-table-border_spacing);
  font-size: var(--tds-font-size--30);
  inline-size: 100%;
  text-align: start;
}
.tds-table--bordered th,
.tds-table--bordered td {
  border: var(--tds-table-border_width) solid var(--tds-color--secondary-accent);
}
.tds-table-caption {
  background-color: var(--tds-table-caption-background-color);
}
.tds-table-row th,
.tds-table-row td {
  background-color: var(--tds-table-background-color);
  font-size: var(--tds-table-header-font_size);
  -webkit-padding-after: var(--tds-table-padding--vertical);
          padding-block-end: var(--tds-table-padding--vertical);
  -webkit-padding-before: var(--tds-table-padding--vertical);
          padding-block-start: var(--tds-table-padding--vertical);
  text-align: start;
  vertical-align: var(--tds-table--vertical-align);
}
.tds-table-row p {
  margin: 0;
}
.tds-table-col--selected,
.tds-table-row--selected th,
.tds-table-row--selected td {
  --tds-table-background-color: var(--tds-color--tertiary);
}
.tds-table--padded_cells th,
.tds-table--padded_cells td {
  -webkit-padding-end: var(--tds-table-padding--horizontal);
          padding-inline-end: var(--tds-table-padding--horizontal);
  -webkit-padding-start: var(--tds-table-padding--horizontal);
          padding-inline-start: var(--tds-table-padding--horizontal);
}
.tds-table--thead_border .tds-table-head th {
  -webkit-border-after: var(--tds-table-border_width) solid var(--tds-color--secondary-accent);
          border-block-end: var(--tds-table-border_width) solid var(--tds-color--secondary-accent);
}
.tds-scrim--black {
  --tds-table-background-color: var(--tds-color--grey15);
}
.tds-scrim--black .tds-table th,
.tds-scrim--black .tds-table td {
  color: var(--tds-color--white);
}
.tds-table-head .tds-table-row th {
  color: var(--tds-text--color);
  font-family: var(--tds-font-family--combined);
  font-weight: var(--tds-font-weight--medium);
}
.tds-table--hoverable .tds-table-body .tds-table-row:hover th,
.tds-table--hoverable .tds-table-body .tds-table-row:hover td {
  background-color: var(--tds-color--tertiary);
}
@media (max-width: 599px) {
  .tds-table--responsive .tds-table {
    display: flex;
    flex-flow: row wrap;
  }

  .tds-table--responsive .tds-table-caption {
    position: -webkit-sticky;
    position: sticky;
    top: var(--tds-table-caption-top);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    -webkit-border-after: 1px solid var(--tds-color--grey50);
            border-block-end: 1px solid var(--tds-color--grey50);
    padding: var(--tds-size--2x);
  }

  .tds-table--responsive .tds-table-caption--white {
    --tds-table-caption-background-color: rgba(255, 255, 255, 0.5);
  }

  .tds-table--responsive .tds-table-caption--light {
    --tds-table-caption-background-color: rgba(125, 125, 125, 0.5);
  }

  .tds-table--responsive .tds-table-caption--black {
    --tds-table-caption-background-color: rgba(0, 0, 0, 0.5);
  }

  .tds-table--responsive .tds-table-caption h1,
  .tds-table--responsive .tds-table-caption h2,
  .tds-table--responsive .tds-table-caption h3,
  .tds-table--responsive .tds-table-caption h4,
  .tds-table--responsive .tds-table-caption h5,
  .tds-table--responsive .tds-table-caption h6 {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }

  .tds-table--responsive .tds-table-head,
  .tds-table--responsive .tds-table-body,
  .tds-table--responsive .tds-table-foot,
  .tds-table--responsive .tds-table-row {
    display: block;
    overflow: scroll;
    max-inline-size: calc(100vw - (var(--tds-size--3x) * 2));
  }

  .tds-table--responsive .tds-table-row td {
    inline-size: 100%;
    display: inline-flex;
    flex-flow: row wrap;
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }

  .tds-table--bordered .tds-table-row {
    -webkit-padding-before: 0;
            padding-block-start: 0;
    -webkit-padding-end: 0;
            padding-inline-end: 0;
    -webkit-margin-after: var(--tds-size--1x);
            margin-block-end: var(--tds-size--1x);
  }

  .tds-table--responsive .tds-table-head {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .tds-table--responsive th::before,
  .tds-table--responsive td::before {
    content: var(--columnHeader) ': ';
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 100%;
    font-family: var(--tds-font-family--combined);
    font-weight: var(--tds-font-weight--medium);
    font-size: var(--tds-font-size--40);
    line-height: var(--tds-line-height--40);
  }

  .tds-table-responsive .tds-table-row {
    -webkit-padding-before: var(--tds-size--2x);
            padding-block-start: var(--tds-size--2x);
    -webkit-padding-after: var(--tds-size--2x);
            padding-block-end: var(--tds-size--2x);
    -webkit-border-after: 1px solid var(--tds-color--grey50);
            border-block-end: 1px solid var(--tds-color--grey50);
  }

  .tds-table--responsive.tds-table--padded_cells th {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }

  .tds-table--responsive .tds-table-body th:first-child {
    font-weight: 400;
  }
}
@media (min-width: 600px) {
  .tds-table--row_border .tds-table-body th,
  .tds-table--row_border .tds-table-body td {
    -webkit-border-before: var(--tds-table-border_width) solid var(--tds-color--secondary-accent);
            border-block-start: var(--tds-table-border_width) solid var(--tds-color--secondary-accent);
  }

  .tds-table--striped .tds-table-body > .tds-table-row:nth-child(odd) > td,
  .tds-table--striped .tds-table-body > .tds-table-row:nth-child(odd) > th {
    --tds-table-background-color: var(--tds-color--tertiary-highlight);
  }
}
/**
 * DEPRECATED
 * See AWSM-3370. Consumers should now use the .tds-data-table pattern
 * (will be removed in TDS 6)
 */
.tds-table--data {
  font-variant-numeric: tabular-nums;
}
/*
 * Data Table
 * - Distinct from consumer display/feature tables
 * - Fewer variants, intended for data-dense/enterprise work
 *
 * In-Progress Component
 * - Expect the component structure to change as this pattern becomes more refined over the course of TDS v5
**/
/* stylelint-disable */
/* stylelint doesn't understand :where/:is selector yet & thinks it has higher specificity */
/* Wrapper + Toolbar */
.tds-data-table-wrapper {
  --tds-data-table--row-hover-radius: 4px;
  --tds-data-table--row-outdent-size: 8px;
  --tds-data-table--vertical-align: middle;

  inline-size: calc(100% + ((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius)) * 2));
  -webkit-margin-end: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius)) * -1);
          margin-inline-end: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius)) * -1);
  -webkit-margin-start: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius)) * -1);
          margin-inline-start: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius)) * -1);
  overflow-x: auto;
  overflow-y: visible;
}
/* Create a minimum space at the top when it's following something else */
* + :is(.tds-data-table-wrapper, .tds-data-table-toolbar) {
  -webkit-margin-before: var(--tds-size--3x);
          margin-block-start: var(--tds-size--3x);
}
.tds-data-table-wrapper + .tds-pagination {
  -webkit-margin-before: var(--tds-size--3x);
          margin-block-start: var(--tds-size--3x);
}
.tds-data-table-toolbar {
  align-items: center;
  display: flex;
  gap: var(--tds-size--2x);
  justify-content: space-between;
}
.tds-data-table-tools {
  align-items: center;
  display: flex;
  gap: var(--tds-size--2x);
}
.tds-data-table-tools--dense {
  gap: var(--tds-size--1x);
}
/* Core Table */
.tds-data-table {
  border-spacing: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  inline-size: calc(100% - var(--tds-data-table--row-hover-radius) * 2);
  margin: 0 var(--tds-data-table--row-hover-radius);
  position: relative;
  z-index: 1;
}
.tds-data-table--dense {
  font-size: 12px;
}
.tds-data-table--align-top {
  --tds-data-table--vertical-align: top;
}
.tds-data-table--align-bottom {
  --tds-data-table--vertical-align: bottom;
}
.tds-data-table tr {
  background-color: transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Specific Cell Styles */
.tds-data-table :where(th, td) {
  -webkit-border-after: 1px solid var(--tds-color--tertiary);
          border-block-end: 1px solid var(--tds-color--tertiary);
  position: relative;
  text-align: start;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  vertical-align: var(--tds-data-table--vertical-align);
  white-space: nowrap;
}
/* Potential Gotcha: ".tds-data-table :where(tbody th, td)" potentially reaches outside itself,
 * as in the case of nested tables. It would only select the th's inside the data-table,
 * but it would select all the th's inside that are also inside any tbody in the ancestor tree
 * therefore we need to scope the tbody to be withhin the data-table.
 *
 * tbody :where(th, td) unnecessarily scopes td's, but is a much safer selector */
.tds-data-table tbody :where(th, td):is(:first-child, :last-child)::before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  z-index: -1;
  border-color: transparent;
  transition: background-color 0.3s ease, top 0.3s ease;
}
.tds-data-table tbody :where(th, td):first-child::before,
[dir='rtl'] .tds-data-table tbody :where(th, td):last-child::before {
  border-radius: var(--tds-data-table--row-hover-radius) 0 0 var(--tds-data-table--row-hover-radius);
  left: calc(var(--tds-data-table--row-hover-radius) * -1);
  right: 100%;
}
.tds-data-table tbody :where(th, td):last-child::before,
[dir='rtl'] .tds-data-table tbody :where(th, td):first-child::before {
  border-radius: 0 var(--tds-data-table--row-hover-radius) var(--tds-data-table--row-hover-radius) 0;
  left: 100%;
  right: calc(var(--tds-data-table--row-hover-radius) * -1);
}
.tds-data-table th {
  font-weight: var(--tds-font-weight--medium);
}
.tds-data-table thead :where(th, td) {
  padding: 12px var(--tds-data-table--row-outdent-size);
}
.tds-data-table tbody :where(th, td) {
  padding: var(--tds-size--1x) var(--tds-data-table--row-outdent-size);
}
/* Hovered row */
.tds-data-table tbody tr:is(:hover, .tds--highlighted),
.tds-data-table tbody tr:is(:hover, .tds--highlighted) :where(th, td)::before {
  background-color: var(--tds-color--tertiary);
}
/* Selected row */
.tds-data-table tbody tr.tds-tr--selected {
  background-color: var(--tds-color--tertiary-highlight);
  position: relative;
  z-index: 4;
}
.tds-data-table tbody tr.tds-tr--selected :where(th, td) {
  border-color: var(--tds-color--tertiary-highlight);
  box-shadow: 0 -1px 0 0 var(--tds-color--tertiary-highlight);
}
.tds-data-table tbody tr.tds-tr--selected :where(th, td)::before {
  background-color: var(--tds-color--tertiary-highlight);
}
.tds-data-table tbody tr.tds-tr--selected + tr.tds-tr--selected :where(th, td)::before {
  top: -6px;
}
/* Focus row */
.tds--indicate-focus .tds-data-table tbody tr:focus-within {
  outline: var(--tds-outline--focus);
  outline-offset: -5px;

  z-index: 5;
}
/* Specialized Cells */
.tds-td--actions {
  -webkit-padding-end: var(--tds-data-table--row-outdent-size);
          padding-inline-end: var(--tds-data-table--row-outdent-size);
  -webkit-padding-start: var(--tds-data-table--row-outdent-size);
          padding-inline-start: var(--tds-data-table--row-outdent-size);
  text-align: end;
}
.tds-data-table tbody tr:is(:hover, .tds--highlighted) .tds-td--actions {
  position: -webkit-sticky;
  position: sticky;
  right: 0;

  /* z-index has to be set on the cell instead of the row for Safari */
  z-index: 10;
}
.tds-td--select {
  -webkit-padding-end: var(--tds-data-table--row-outdent-size);
          padding-inline-end: var(--tds-data-table--row-outdent-size);
  -webkit-padding-start: var(--tds-data-table--row-outdent-size);
          padding-inline-start: var(--tds-data-table--row-outdent-size);
  white-space: nowrap;
  width: 0;
}
/* Sort (Individual Headers) */
.tds-th--sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tds-data-table thead :where(th, td).tds-th--sortable {
  padding: 0;
}
.tds-th--sortable :focus {
  outline: none;
}
.tds-th--sortable .tds-th--inner:focus-visible::before {
  outline: var(--tds-outline--focus);
  outline-offset: -2px;
}
.tds--indicate-focus .tds-th--sortable .tds-th--inner:focus::before {
  outline: var(--tds-outline--focus);
  outline-offset: -2px;
}
.tds-th--sortable .tds-th--inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--tds-size--half);
  border-radius: var(--tds-size--half);
  background-color: transparent;
  transition: background-color 0.3s ease, transform 0.3s ease;
  z-index: -1;
}
.tds-th--sortable:hover .tds-th--inner::before {
  background-color: var(--tds-color--tertiary);
}
.tds-data-table--prototype-animated-th-hover .tds-th--sortable .tds-th--inner::before {
  transform: scale(0.7);
}
.tds-data-table--prototype-animated-th-hover .tds-th--sortable:hover .tds-th--inner::before {
  transform: scale(1);
}
/* Same padding internally as a regular th */
.tds-th--sortable .tds-th--inner {
  padding: 12px var(--tds-data-table--row-outdent-size);
  text-align: inherit;
  width: 100%;
}
.tds-th--sortable .tds-icon {
  -webkit-margin-start: var(--tds-size--half);
          margin-inline-start: var(--tds-size--half);
  vertical-align: middle;
}
:is(.tds-scrim--black, .tds-colorscheme-dark) .tds-th--sortable:not(:hover) .tds-icon {
  --tds-text--color--placeholder: var(--tds-color--grey30);
}
:where(.tds-data-table) th [class*='tds-icon-double-chevron'] {
  --tds-icon-double-chevron-down--fill: var(--tds-text--color--placeholder);
  --tds-icon-double-chevron-up--fill: var(--tds-text--color--placeholder);

  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tds-th--sort-asc [class*='tds-icon-double-chevron'] {
  --tds-icon-double-chevron-up--fill: var(--tds-color--secondary-highlight);
}
.tds-th--sort-desc [class*='tds-icon-double-chevron'] {
  --tds-icon-double-chevron-down--fill: var(--tds-color--secondary-highlight);
}
:is(.tds-th--sortable:hover, .tds-th--sort-asc, .tds-th--sort-desc) [class*='tds-icon-double-chevron'] {
  opacity: 1;
}
.tds-th--sortable :focus-visible [class*='tds-icon-double-chevron'] {
  opacity: 1;
}
.tds--indicate-focus .tds-th--sortable :focus [class*='tds-icon-double-chevron'] {
  opacity: 1;
}
/* Sticky First Column */
.tds-data-table--sticky-first-col th:first-child {
  left: 0;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
}
[dir='rtl'] .tds-data-table--sticky-first-col th:first-child {
  left: auto;
  right: 0;
}
.tds-data-table--sticky-first-col th:first-child::after {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  right: 0;
  background: var(--tds-scrim--background, var(--tds-color--white));
  transition: background-color 0.3s ease;

  /* Should stack behind the ::before element on sticky headers,
  that way a sticky + sortable header gets the right background on hover */
  z-index: -2;
}
.tds-data-table--sticky-first-col tbody tr:is(:hover, .tds--highlighted) th:first-child::after {
  background: var(--tds-color--tertiary);
}
/* Null Message */
.tds-data-table-null-message {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: clamp(100px, 10vh, 200px) 40px;
}
/* PROTOTYPE: Standalone Choice Inputs
 * TODO: Re-organize form items/inputs in TDS v6 so that inputs can be used
 * on their own, without needing to be wrapped in a form-item
 * TODO: Break choices out into their own form-input--choice.css file */
.tds-data-table .tds-form-input--choice {
  --tds-form-input--background-color: transparent;
  --tds-form-input--border-color: var(--tds-text--color--light);
  --tds-form-input--border-radius: var(--tds-size--half);
  --tds-form-input--height: var(--tds-size--3x);

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  position: relative;
  margin: 0;
  color: var(--tds-text--color);
  inline-size: var(--tds-form-input--height);
  block-size: var(--tds-form-input--height);
  border: 1px solid var(--tds-form-input--border-color);
  border-radius: var(--tds-form-input--border-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow 0.25s ease;
}
.tds-data-table .tds-form-input--choice[type='checkbox'] {
  --tds-form-input--check-height: 100%;
}
.tds-data-table .tds-form-input--choice[type='radio'] {
  --tds-form-input--border-radius: 100%;
  --tds-form-input--check-height: calc(100% - 6px);
}
.tds-data-table .tds-form-input--choice:focus {
  --tds-form-input--border-color: var(--tds-color--secondary);

  box-shadow: inset 0 0 0 1px var(--tds-color--secondary);
  outline: none;
}
/* Check/Fill for Choices */
.tds-data-table .tds-form-input--choice::after {
  --base-transition: transform 0.33s var(--tds-bezier), border-color 0.33s var(--tds-bezier);

  content: '';
  display: block;
  inline-size: var(--tds-form-input--check-height);
  block-size: var(--tds-form-input--check-height);
  border-radius: var(--tds-form-input--border-radius);
  transform: scale(0);
  background-image: var(--tds-background-image--check);
  transition: var(--base-transition), background-image 0s 0.33s;
}
.tds-data-table .tds-form-input--choice:is(:checked, :indeterminate):after {
  transform: scale(1);
  transition: var(--base-transition), background-image 0s 0s;
}
.tds-data-table .tds-form-input--choice[type='checkbox']:checked::after {
  background-image: var(--tds-background-image--check);
}
/* Per the HTML Spec, `indeterminate` must be set via js for it to work
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate */
.tds-data-table .tds-form-input--choice[type='checkbox']:indeterminate::after {
  background-image: var(--tds-background-image--minus);
}
.tds-data-table .tds-form-input--choice[type='radio']::after {
  background-color: var(--tds-color--secondary);
}
.tds-data-table .tds-form-input--choice[type='radio']::after,
.tds-data-table .tds-form-input--choice[type='radio']:checked::after {
  --tds-form-input--border-color: var(--tds-color--secondary);
}
/* Dense choice to match enterprise styles
 * (TODO: this would be a variant on choices,
 * but enabled by default when within a data-table) */
.tds-data-table .tds-form-input--choice {
  --tds-form-input--font-size: var(--tds-font-size--20);
  --tds-form-input--height: var(--tds-size--2x);
}
/* Styles that might need to stay Data-Table overrides for the selection pattern */
.tds-td--select .tds-form-input--choice {
  display: block;
}
/* TODO: Refactor imports for tabs */
/* @import './panels--carousel.css'; */
/**
 * tab-panel base styles
 * - Import this file only if you are running your own css post-processor and know what you're doing.
 */
.tds-tab-panel-list {
  inline-size: 100%;
}
.tds-tab-panel {
  display: none;
  visibility: hidden;
  transition: visibility 0.5s 0.5s;
}
.tds-tab-panel--active {
  display: block;
  visibility: inherit;
  transition: visibility 0.5s 0s;
}
/* Tab Lists */
.tds-tab-list {
  --tds-tab--background-color-off: transparent;
  --tds-tab--background-color-on: var(--tds-color--tertiary);
  --tds-tab--border-radius: var(--tds-border-radius--pill);
  --tds-tab--box-shadow--focus-off: inset 0 0 0 0 transparent;
  --tds-tab--box-shadow--focus-on: inset 0 0 0 3px rgba(var(--tds-color--rgb-shade), 0.08);
  --tds-tab--box-shadow--highlight-off: 0 0 0 0 transparent;
  --tds-tab--box-shadow--highlight-on: 0 0 0 0 transparent;
  --tds-tab-list--height: var(--tds-height--pill);

  align-items: center;
  display: grid;
  gap: var(--tds-size--half);
  grid-auto-flow: column;
  height: var(--tds-tab-list--height);
  overflow-x: auto;
  position: relative;
}
/* Debug style TODO: convert to focus-within??? */
.tds-tab-list:focus-within {
  box-shadow: inset 0 0 0 1px var(--tds-color--tertiary-highlight);
}
/* Variants */
.tds-tab-list--toggle {
  --tds-tab--background-color-on: var(--tds-toggle--fill-color);
  --tds-tab--box-shadow--highlight-on: var(--tds-box-shadow--small);

  background-color: var(--tds-toggle--background-color);
  border-radius: var(--tds-border-radius--pill);
  padding: var(--tds-size--half);
}
/* Rectangular variants */
.tds-tab-list--vertical,
.tds-tab-list--legacy-vertical,
.tds-tab-list--underline {
  --tds-tab--border-radius: 0;

  gap: 0;
}
.tds-tab-list--vertical,
.tds-tab-list--legacy-vertical {
  --tds-tab--justify-content: start;
  --tds-tab-list--height: auto;

  grid-auto-flow: row;
}
.tds-tab-list--legacy-vertical {
  --tds-tab--background-color-on: transparent;
  --tds-tab--box-shadow--highlight-off: inset 0 0 0 0 transparent;
  --tds-tab--box-shadow--highlight-on: inset -4px 0 0 0 var(--tds-color--primary);
}
.tds-tab-list--underline {
  --tds-tab--background-color-on: transparent;
  --tds-tab--box-shadow--highlight-off: inset 0 -1px 0 0 var(--tds-color--secondary);
  --tds-tab--box-shadow--highlight-on: inset 0 -4px 0 0 var(--tds-color--secondary);
  --tds-tab-list--height: var(--tds-size--7x);
}
/* Dots */
.tds-tab-list--dots {
  --tds-tab--background-color-off: var(--tds-color--secondary-accent);
  --tds-tab--background-color-on: var(--tds-color--secondary);
  --tds-tab-list--height: 12px;

  justify-content: center;
}
/* Animation */
.tds-tab-list--animated {
  --tds-animate-backdrop-visibility: inherit;
}
/*
 * Individual Tabs
 * - Note: Several tokens come from the tab-list component
 */
.tds-tab {
  --tds-tab--background-color: var(--tds-tab--background-color-off);
  --tds-tab--box-shadow--focus: var(--tds-tab--box-shadow--focus-off);
  --tds-tab--box-shadow--highlight: var(--tds-tab--box-shadow--highlight-off);

  /* Probably generic pill styles, cross-reference with tds-btn */
  align-items: center;
  block-size: calc(var(--tds-tab-list--height) - 8px);
  border-radius: var(--tds-tab--border-radius);
  display: inline-flex;
  font-family: var(--tds-font-family--combined);
  font-size: var(--tds-font-size--20);
  font-weight: var(--tds-font-weight--medium);
  justify-content: var(--tds-tab--justify-content, center);
  line-height: 1.2;
  padding: var(--tds-size--half) var(--tds-size--3x);
  position: relative;

  /* Tabs-specific styles */
  color: var(--tds-text--color--light);
  background-color: var(--tds-tab--background-color);
  scroll-snap-align: center;
  box-shadow: var(--tds-tab--box-shadow--focus), var(--tds-tab--box-shadow--highlight);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
/* Variants */
.tds-tab-list--vertical .tds-tab,
.tds-tab-list--legacy-vertical .tds-tab {
  min-block-size: var(--tds-height--pill);
}
.tds-tab-list--underline .tds-tab {
  min-block-size: var(--tds-tab-list--height);
}
.tds-tab-list--dots .tds-tab {
  font-size: 0;
  padding: var(--tds-size--half);
  text-indent: -10000px;
}
.tds-tab-list--animated .tds-tab {
  --tds-tab--background-color-on: var(--tds-tab--background-color-off);
  --tds-tab--box-shadow--highlight-on: var(--tds-tab--box-shadow--highlight-off);
}
.tds-tab:focus {
  outline: none;
}
/* TODO: for debugging purposes only, convert to focus-within */
.tds-tab:focus,
.tds--indicate-focus .tds-tab:focus {
  --tds-tab--box-shadow--focus: var(--tds-tab--box-shadow--focus-on);

  border: none;
  color: var(--tds-color--secondary);
  outline: none;
}
/* Active State */
.tds-tab[aria-selected='true'] {
  --tds-tab--background-color: var(--tds-tab--background-color-on);
  --tds-tab--box-shadow--highlight: var(--tds-tab--box-shadow--highlight-on);

  cursor: inherit;
  color: var(--tds-color--secondary);
  background-color: var(--tds-tab--background-color);
}
/* TODO: for debugging purposes only, convert to focus-within */
.tds-tab[aria-selected='true']:focus,
.tds--indicate-focus .tds-tab[aria-selected='true']:focus {
  --tds-tab--box-shadow--focus: var(--tds-tab--box-shadow--focus-off);
}
/* Backdrop should replicate the specific styles that indicate a selected tab */
.tds-tab-list--animated .tds--animated-backdrop {
  background-color: var(--tds-tab--background-color-on);
  border-radius: var(--tds-tab--border-radius);
  box-shadow: var(--tds-tab--box-shadow--highlight-on);
}
.tds-tab-list--dots .tds--animated-backdrop {
  z-index: 1;
}
/* @import './tab-list.css'; */
/* @import './tabs--vertical.css';
@import './tabs--underline.css';
@import './tabs--toggle.css';
@import './tabs--legacy--vertical.css';
@import './tabs--legacy--pill.css';
@import './tabs--dot.css'; */
/**
 * Tooltip Styles
 */
.tds-tooltip {
  --tds-tooltip--padding: var(--tds-padding--card);

  /* Distance the tooltip travels vertically on open/close */
  --tds-tooltip--translate-y: var(--tds-size--1x);

  /* Extra space around the tooltip that a user can hover without closing */
  --tds-tooltip--safe-space: var(--tds-size--1x);

  /*
   * Offset to allow for js to dynamically modify position, without interfering with other styles
   * - NOTE: for calc in translate rules to work, value must be '0px', not '0'
   */
  --tds-tooltip--x-offset: 0px; /* stylelint-disable-line */

  background-color: var(--tds-dialog--background-color);
  border-radius: var(--tds-border-radius--card--dense);
  bottom: calc(100% + var(--tds-tooltip--safe-space));
  box-shadow: var(--tds-box-shadow--medium);
  inline-size: -webkit-max-content;
  inline-size: -moz-max-content;
  inline-size: max-content;
  left: 50%;
  max-inline-size: min(calc(100vw - 48px), 400px);
  padding: var(--tds-tooltip--padding);
  position: absolute;
  text-align: initial;
  top: auto;
  z-index: 550;
}
/* Inactive state (default) */
.tds-tooltip,
.tds-tooltip--closed {
  opacity: 0;
  transform:
    translateY(var(--tds-tooltip--translate-y))
    translateX(calc(-50% + var(--tds-tooltip--x-offset)));
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier), visibility 0s 0.5s;
}
/* Active state */
.tds-tooltip.tds-tooltip--open {
  --tds-tooltip--translate-y: 0;

  opacity: 1;
  pointer-events: inherit;
  visibility: inherit;
  transition: opacity 0.5s var(--tds-bezier), transform 0.5s var(--tds-bezier), visibility 0s 0s;
}
/* Variants */
.tds-tooltip--dense {
  /* Offset the vertical padding to visually square the space up
  (line height makes it look too tall out of the box) */
  --tds-tooltip--padding: calc(var(--tds-padding--card--dense) - var(--tds-size--half)) var(--tds-padding--card--dense);
}
/* Orient downward */
.tds-tooltip--orientation-down {
  --tds-tooltip--translate-y: calc(var(--tds-size--1x) * -1);

  bottom: auto;
  top: calc(100% + var(--tds-tooltip--safe-space));
}
.tds-tooltip--align-start,
.tds-tooltip--align-end {
  transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
}
.tds-tooltip--align-start,
[dir='rtl'] .tds-tooltip--align-end {
  left: calc(var(--tds-tooltip--padding) * -1);
  right: auto;
}
/* stylelint-disable-next-line no-descending-specificity */
.tds-tooltip--align-end,
[dir='rtl'] .tds-tooltip--align-start {
  left: auto;
  right: calc(var(--tds-tooltip--padding) * -1);
}
/* Full-width */
.tds-tooltip--width-full {
  inline-size: 100%;
  left: 0;
  max-inline-size: 100%;
  right: 0;
  transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
}
/* Enlarged hover/tap target */
.tds-tooltip::before {
  bottom: calc(var(--tds-tooltip--safe-space) * -1);
  content: '';
  left: calc(var(--tds-tooltip--safe-space) * -1);
  position: absolute;
  right: calc(var(--tds-tooltip--safe-space) * -1);
  top: calc(var(--tds-tooltip--safe-space) * -1);
  z-index: -1;
}
/**
 * Data-trigger
 * - Only determines which element triggers the visible state for the tooltip
 */
[data-tds-tooltip-trigger] {
  cursor: pointer;
}
/* Wrapper
 * - Only determines what other component sets the position for the tooltip
 */
.tds-tooltip-wrapper,
.tds-tooltip-wrapper--inline {
  position: relative;
}
.tds-tooltip-wrapper {
  display: flex;
}
.tds-tooltip-wrapper--inline {
  display: inline-flex;
}
/* Content */
.tds-tooltip > *:first-child {
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -webkit-padding-before: 0;
          padding-block-start: 0;
}
.tds-tooltip > *:last-child {
  -webkit-margin-after: 0;
          margin-block-end: 0;
  -webkit-padding-after: 0;
          padding-block-end: 0;
}
:root,
.tds-component-preview {
  --tds-heading--font-weight: 500;
  --tds-heading--letter-spacing: 0;
  --tds-heading--text-transform: none;
}
/******************************************************************************
Core Text Styles
******************************************************************************/
/* Should match h1-6 and text-element reset in base/normalize.css */
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4,
.tds-text--h5,
.tds-text--h6,
.tds-text--caption-header,
.tds-text--section_subtitle,
.tds-text--body_large,
.tds-text--body {
  display: block;
  margin: 0;
}
.tds-text--h1,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4,
.tds-text--h5,
.tds-text--h6,
.tds-text--caption-header,
.tds-text--body,
.tds-list {
  line-height: var(--tds-line-height--30);
}
strong {
  color: var(--tds-heading--color);
}
/* -- Headlines
----------------------------------------------------------------------------- */
/* Headlines and Subtitles */
h1,
h2,
h3,
h4,
h5,
h6,
.tds-text--h1,
.tds-text--h1-alt,
.tds-text--h2,
.tds-text--h3,
.tds-text--h4,
.tds-text--h5,
.tds-text--h6,
.tds-text--caption-header {
  font-family: var(--tds-font-family--combined);
  font-weight: var(--tds-heading--font-weight);
  -webkit-padding-before: var(--tds-size--4x);
          padding-block-start: var(--tds-size--4x);
  -webkit-padding-after: var(--tds-size--1x);
          padding-block-end: var(--tds-size--1x);
  text-transform: var(--tds-heading--text-transform);
  letter-spacing: var(--tds-heading--letter-spacing);
  color: var(--tds-heading--color);
  transition: font 0.33s ease, color 0.33s ease, opacity 0.33s ease;
}
h6,
.tds-text--h6 {
  -webkit-padding-after: 0;
          padding-block-end: 0;
}
/* Reduce padding for directly-paired headings */
:is(h1, h2, h3, h4, h5, h6, .tds-text--h1, .tds-text--h1-alt, .tds-text--h2, .tds-text--h3, .tds-text--h4, .tds-text--h5, .tds-text--h6) + :is(h1, h2, h3, h4, h5, h6, .tds-text--h1, .tds-text--h1-alt, .tds-text--h2, .tds-text--h3, .tds-text--h4, .tds-text--h5, .tds-text--h6) {
  -webkit-padding-before: var(--tds-size--2x);
          padding-block-start: var(--tds-size--2x);
}
@media (max-width: 599px) {
  h1,
  .tds-text--h1,
  .tds-text--h1-alt {
    --tds-heading--letter-spacing: -0.7px;

    font-size: var(--tds-font-size--70, 28px);
    line-height: var(--tds-line-height--70, 36px);
  }

  h2,
  .tds-text--h2 {
    --tds-heading--letter-spacing: -0.6px;

    font-size: var(--tds-font-size--60, 24px);
    line-height: var(--tds-line-height--60, 28px);
  }

  h3,
  .tds-text--h3 {
    --tds-heading--letter-spacing: -0.5px;

    font-size: var(--tds-font-size--50, 20px);
    line-height: var(--tds-font-size--60, 28px);
  }

  h4,
  .tds-text--h4 {
    font-size: var(--tds-font-size--40, 17px);
    line-height: var(--tds-line-height--20, 20px);
  }

  h5,
  .tds-text--h5 {
    font-size: var(--tds-font-size--30, 14px); /* TODO: */
    line-height: var(--tds-line-height--30, 21px);
  }

  h6,
  .tds-text--h6 {
    font-size: var(--tds-font-size--30, 14px);
    line-height: var(--tds-line-height--30, 21px);
  }

  .tds-text--caption-header {
    font-size: var(--tds-font-size--20, 12px);
    line-height: var(--tds-line-height--10, 18px);
  }
}
@media (min-width: 600px) {
  h1,
  .tds-text--h1 {
    --tds-heading--letter-spacing: -0.6px;

    font-size: var(--tds-font-size--80, 40px);
    line-height: var(--tds-line-height--80, 48px);
  }

  .tds-text--h1-alt {
    --tds-heading--letter-spacing: -0.6px;

    font-size: var(--tds-font-size--75);
    line-height: var(--tds-line-height--75);
  }

  h2,
  .tds-text--h2 {
    --tds-heading--letter-spacing: -0.5px;

    font-size: var(--tds-font-size--70, 28px);
    line-height: var(--tds-line-height--70, 36px);
  }

  h3,
  .tds-text--h3 {
    --tds-heading--letter-spacing: -0.6px;

    font-size: var(--tds-font-size--60, 24px);
    line-height: var(--tds-line-height--60, 28px);
  }

  h4,
  .tds-text--h4 {
    --tds-heading--letter-spacing: -0.4px;

    font-size: var(--tds-font-size--50, 20px);
    line-height: var(--tds-line-height--60, 28px);
  }

  h5,
  .tds-text--h5 {
    font-size: var(--tds-font-size--40, 17px);
    line-height: var(--tds-line-height--20, 20px);
  }

  h6,
  .tds-text--h6 {
    font-size: var(--tds-font-size--30, 14px);
    line-height: var(--tds-line-height--30, 21px);
  }

  .tds-text--caption-header {
    font-size: var(--tds-font-size--20, 12px);
    line-height: var(--tds-line-height--10, 18px);
  }
}
/* -- Eyebrow Pattern
----------------------------------------------------------------------------- */
.tds-text-eyebrow--10,
.tds-text-eyebrow--20,
.tds-text-eyebrow--30 {
  display: block;
  font-family: var(--tds-font-family--combined);
  font-weight: var(--tds-font-weight--book);
  line-height: var(--tds-line-height--unitless);
}
.tds-text-eyebrow--30,
.tds-text-eyebrow--20 {
  letter-spacing: -0.4px;
}
.tds-text-eyebrow--10 {
  font-size: var(--tds-font-size--30);
}
.tds-text-eyebrow--20 {
  font-size: var(--tds-font-size--40);
}
.tds-text-eyebrow--30 {
  font-size: var(--tds-font-size--55);
}
@media (max-width: 599px) {
  .tds-text--jumbo_mobile {
    font-size: 36px !important;
    line-height: 36px !important;
    font-family: var(--tds-font-family--combined) !important;
    font-weight: var(--tds-heading--font-weight) !important;
  }
}
/* -- Body Copy
 * NOTE: Should mirror the base copy in base/normalize.css
----------------------------------------------------------------------------- */
.tds-text--body {
  font-size: var(--tds-font-size--30);
  line-height: var(--tds-line-height--30);
}
.tds-text--body + .tds-text--body {
  -webkit-padding-before: 14px;
          padding-block-start: 14px;
}
.tds-text--caption {
  color: var(--tds-caption--color);
  font-size: var(--tds-font-size--20);
  line-height: var(--tds-line-height--10);
}
/******************************************************************************
Text Modifiers
******************************************************************************/
/* -- Weight Modifiers
----------------------------------------------------------------------------- */
.tds-text--200 {
  font-weight: 200 !important;
}
.tds-text--300 {
  font-weight: 300 !important;
}
.tds-text--400 {
  font-weight: 400 !important;
}
.tds-text--500 {
  font-weight: 500 !important;
}
.tds-text--700 {
  font-weight: 700 !important;
}
/* -- Color Modifiers
----------------------------------------------------------------------------- */
.tds-text--contrast-high {
  color: var(--tds-text--contrast-high);
}
.tds-text--contrast-medium {
  color: var(--tds-text--contrast-medium);
}
.tds-text--contrast-low {
  color: var(--tds-text--contrast-low);
}
/* --- Alignment Modifiers
---------------------------------------------------------------- */
.tds-text--center {
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  text-align: center !important;
}
.tds-text--end {
  text-align: end !important;
}
.tds-text--start {
  text-align: start !important;
}
/* -- Modifier to add visual divider line to the right of text
----------------------------------------------------------------------------- */
.tds-text--with_divider {
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.tds-text--with_divider::after {
  background-color: var(--tds-color--secondary);
  block-size: 1px;
  content: '';
  display: block;
  inline-size: 100%;
  -webkit-margin-start: 0.5em;
          margin-inline-start: 0.5em;
}
.tds-text--capitalize {
  text-transform: capitalize;
}
.tds-text--uppercase {
  text-transform: uppercase;
}
.tds-text--lowercase {
  text-transform: lowercase;
}
/* -- Code Snippet Styling
----------------------------------------------------------------------------- */
code {
  max-inline-size: 100%;
  overflow: scroll;
  padding: 0.125em 0.414em;
  border-radius: 0.25em;
  color: var(--tds-code-color);
  border: 1px solid var(--tds-code-border-color);
  background-color: var(--tds-code-bg-color);
  font-family: var(--tds-font-family--monospace);
  transition: background-color 0.3s ease, color 0.3s ease;
}
pre code {
  display: block;
  margin: 0;
  padding: var(--tds-size--1x);
  white-space: pre;
}
@media (max-width: 599px) {
  pre,
  code {
    overflow: scroll;
  }
}
/* TODO: Q2 2021 v5.0 Forms Refactor */
/* -- Option Group Core Styles
 * Deprecated: TODO: Refactor such that option groups become a style-variant on checkbox/radio components
----------------------------------------------------------------------------- */
/* stylelint-disable */
:root,
.tds-component-preview {
  --tds-option-checkbox--left: 20px;
  --tds-option-checkbox--left--checkmark: 21px;
  --tds-option-checkbox--right: auto;
  --tds-option-checkbox--right--checkmark: auto;
}
[dir='rtl'] {
  --tds-option-checkbox--left: auto;
  --tds-option-checkbox--left--checkmark: auto;
  --tds-option-checkbox--right: 20px;
  --tds-option-checkbox--right--checkmark: 21px;
}
.tds-option_group {
  --tds-form-item--indent: 0;

  align-content: center;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  text-align: center;
}
.tds-option_group + .tds-form-feedback-wrap {
  -webkit-padding-after: var(--tds-size--half);
          padding-block-end: var(--tds-size--half);
  -webkit-padding-before: var(--tds-size--half);
          padding-block-start: var(--tds-size--half);
}
.tds-option_group .tds--is_visually_hidden:focus {
  block-size: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}
.tds-option_group .tds-option {
  inline-size: 100%;
  -webkit-margin-before: var(--tds-size--2x);
          margin-block-start: var(--tds-size--2x);
}
.tds-option_group .tds-option:first-child {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
/* Option Labels */
.tds-option_group .tds-form-label {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  flex-flow: row wrap;
  border-radius: var(--tds-border-radius--pill);
  min-block-size: var(--tds-size--6x);
  inline-size: 100%;
  padding: 0 20px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--tds-color--grey40);
  transition: box-shadow 0.33s cubic-bezier(0.5, 0, 0, 0.75);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  line-height: var(--tds-line-height--unitless);
  background-color: transparent;
  font-family: var(--tds-font-family--combined);
}
.tds-option_group .tds-form-label-text,
.tds-option_group .tds-form-label-caption {
  font-size: var(--tds-font-size--30);
  font-weight: var(--tds-font-weight--book);
}
.tds-option_group--multiselect .tds-form-label {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-padding-start: var(--tds-size--7x);
          padding-inline-start: var(--tds-size--7x);
  position: relative;
}
.tds-option_group .tds-form-input:checked + .tds-form-label,
.tds-option_group .tds-form-input:checked + .tds-form-label .tds-form-label-text,
.tds-option_group .tds-form-input:checked + .tds-form-label .tds-form-label-caption {
  font-family: var(--tds-font-family--combined);
  font-weight: var(--tds-font-weight--medium)
}
.tds-option_group .tds-form-input:disabled + .tds-form-label {
  box-shadow: 0 0 0 1px var(--tds-color--grey50);
  cursor: not-allowed;
  opacity: var(--tds-opacity--50);
}
.tds-option_group .tds-form-input:checked + .tds-form-label,
.tds-option_group .tds-form-input:focus ~ .tds-form-label {
  box-shadow: inset 0 0 0 3px var(--tds-color--primary);
}
.tds-option_group--alternate .tds-form-input:focus ~ .tds-form-label,
.tds-option_group--alternate .tds-form-input:checked ~ .tds-form-label {
  box-shadow: inset 0 0 0 3px var(--tds-color--secondary);
}
/* Elements within Option Labels */
.tds-option_group .tds-form-label .tds-form-label-text,
.tds-option_group .tds-form-label .tds-form-label-caption {
  color: var(--tds-color--secondary);
  font-family: inherit;
  font-variant-numeric: lining-nums;
  margin: 0;
  white-space: nowrap;
}
.tds-option_group--multiselect .tds-form-label-text {
  -webkit-margin-start: var(--tds-size--4x);
          margin-inline-start: var(--tds-size--4x);
}
.tds-option-label .tds-form-label-text:only-child {
  display: flex;
  justify-content: center;
}
.tds-option_group--multiselect .tds-form-label .tds-form-label-text:only-child {
  justify-content: flex-start;
}
/* Checkmark */
.tds-option_group--multiselect .tds-form-label::before {
  left: var(--tds-option-checkbox--left);
  position: absolute;
  right: var(--tds-option-checkbox--right);
  top: 12px;
}
.tds-option_group--multiselect .tds-form-label::after,
.tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label::after {
  left: var(--tds-option-checkbox--left--checkmark);
  right: var(--tds-option-checkbox--right--checkmark);
  top: 13px;
}
[dir='rtl']
  .tds-option_group--multiselect
  .tds-checkbox-input:checked
  ~ .tds-label--checkbox::after {
  right: 22px;
}
[dir='rtl'] .tds-option_group--multiselect .tds-form-label::before {
  right: var(--tds-option-checkbox--right--checkmark);
}
/* Borrowed from old r/v3 Checkbox styles */
.tds-option_group .tds-label--checkbox::before,
.tds-option_group .tds-label--checkbox::after {
  block-size: 20px;
  border-radius: var(--tds-border-radius);
  content: '';
  display: block;
  inline-size: 20px;
  position: absolute;
}
/* border of the checkbox */
.tds-option_group .tds-label--checkbox::before {
  background-color: transparent;
  border: var(--tds-border-width--small) solid var(--tds-color--grey30);
  transition: var(--tds-animate--focus);
}
.tds-option_group .tds-label--checkbox::after {
  background-image: var(--tds-background-image--check);
  background-position: top left;
  background-repeat: no-repeat;
  border: none;
  opacity: 0;
  transition: var(--tds-animate--focus);
}
.tds-option_group--multiselect .tds-form-input:checked + .tds-label--checkbox::after {
  opacity: 1;
}
[dir='rtl'] .tds-option_group.tds-label--checkbox::before,
[dir='rtl'] .tds-option_group.tds-label--checkbox::after {
  left: initial;
  right: 0;
}
/* TODO */
.tds-option_group .tds-form-input {
  --tds-form-input--height: 0;
}
.tds-progress_bar-wrapper {
  inline-size: 100%;
  position: relative;
}
.tds-progress_bar {
  --progress-border-radius: var(--tds-border-radius--pill);
  --progress-height: var(--tds-size--2x);
  --tds-progress-bar--background-color: transparent;
  --tds-progress-bar--bar-color: var(--tds-color--tertiary);
  --tds-progress-bar--value-color: var(--tds-color--primary);

  /* Reset the default appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  block-size: var(--progress-height);
  inline-size: 100%;
  display: block;
  border: none;
  border-radius: var(--progress-border-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}
.tds-progress_bar--secondary {
  --tds-progress-bar--value-color: var(--tds-color--secondary);
}
.tds-progress_bar::-webkit-progress-bar {
  border: none;
  border-radius: var(--progress-border-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
  background-color: var(--tds-progress-bar--bar-color);
}
.tds-progress_bar::-webkit-progress-value {
  background-color: var(--tds-progress-bar--value-color);
  border-radius: var(--progress-border-radius);
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.tds-progress_bar::-moz-progress-bar {
  background-color: var(--tds-progress-bar--value-color);
}
.tds-input-color {
  overflow: hidden;
  padding: 0;
}
.tds-input-color::-webkit-color-swatch-wrapper {
  border-radius: var(--tds-form-item-border_radius);
  padding: 0;
}
.tds-input-color::-webkit-color-swatch {
  border: 0;
}
.tds-theme--enterprise {
  --tds-banner--padding: var(--tds-size--1x);
}
.tds-theme--enterprise {
  /* Content Containers */
  --tds-content_container--max_width: 1824px;
}
:where(.tds-theme--enterprise) .tds-chip {
  /* Adjust size to accomodate border width */
  --tds-chip--height: calc(var(--tds-size--3x) - 2px);

  font-size: var(--tds-font-size--20);
  line-height: var(--tds-size--4x);
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}
:where(.tds-theme--enterprise) .tds-chip .tds-icon-btn {
  --tds-icon-btn--size: var(--tds-chip--height);
}
/* -- Form Input Theme Adjustments
----------------------------------------------------------------------------- */
.tds-theme--enterprise :not(.tds-option) > .tds-form-input {
  --tds-form-input--font-size: var(--tds-font-size--20);

  /* Adjust size to accommodate border width */
  --tds-form-input--height: calc(var(--tds-size--4x) - 2px);
}
.tds-theme--enterprise .tds-form-item--choice {
  grid-column-gap: 12px;
}
/* Choice */
.tds-theme--enterprise .tds-form-item--choice .tds-form-input {
  --tds-form-input--height: var(--tds-size--2x);
}
.tds-theme--enterprise [type='checkbox'].tds-form-input {
  --tds-form-input--check-height: 16px;
}
.tds-theme--enterprise [type='radio'].tds-form-input {
  --tds-form-input--check-height: 6px;
}
.tds-theme--enterprise .tds-form-item--choice [type='checkbox']::after {
  background-position: -1px 0;
  background-size: 16px;
}
/* Textarea */
.tds-theme--enterprise .tds-form-item--textarea .tds-form-input {
  /* Logical prop (future, currently supported in FF only) */
  border-end-end-radius: 0;
}
.tds-theme--enterprise .tds-form-item--range {
  --tds-range-slider--thumb-offset: -4px;
  --tds-range-slider--thumb-size-x: var(--tds-size--2x);
  --tds-range-slider--thumb-size-y: var(--tds-size--2x);
}
.tds-theme--enterprise .tds-form-item--range .tds-form-input {
  --tds-form-input--height: var(--tds-size--1x);
}
.tds-theme--enterprise .tds-search-reset,
.tds-theme--enterprise .tds-search-submit {
  --tds-search-button-size: var(--tds-size--4x);
}
.tds-theme--enterprise .tds-search-icon {
  --tds-search-icon-size: var(--tds-size--2x);
}
.tds-theme--enterprise .tds-form-item {
  --tds-form-item--indent: var(--tds-size--2x);
}
.tds-theme--enterprise .tds-form-item--choice {
  --tds-form-item--indent: 0;
}
.tds-theme--enterprise .tds-form-label {
  --tds-form-label--font-size: var(--tds-font-size--20);
}
.tds-theme--enterprise .tds-form-item--choice .tds-form-label-caption {
  margin-bottom: 0;
}
:where(.tds-theme--enterprise) .tds-icon-btn {
  --tds-icon-btn--border-width: var(--tds-border-width--small);
  --tds-icon-btn--size: var(--tds-size--4x);
}
.tds-theme--enterprise {
  --progress-height: 12px;
}
.tds-theme--enterprise {
  --tds-table-border_spacing: 0;
  --tds-table-border_width: 1px;
  --tds-table-header-font_size: var(--tds-font-size--20);
  --tds-table-padding--horizontal: var(--tds-size--1x);
  --tds-table-padding--vertical: var(--tds-size--1x);
}
/* -- Button Theme Adjustments
----------------------------------------------------------------------------- */
.tds-theme--marketing .tds-btn {
  color: var(--tds-color--inverse);
}
.tds-theme--marketing .tds-btn--secondary {
  color: var(--tds-color--secondary);
}
.tds-theme--marketing .tds-btn--secondary:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
  color: var(--tds-color--inverse);
}
.tds-theme--marketing .tds-btn--tertiary {
  color: var(--tds-text--color);
}
/* -- Button Theme Adjustments
----------------------------------------------------------------------------- */
/* Default Button */
.tds-theme--replicant .tds-btn {
  --tds-btn--background-color: transparent;

  border: none;
  color: var(--tds-color--inverse);
  filter: var(--tds-glow--medium);
  font-weight: var(--tds-font-weight--bold, 700);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: 0.5s ease;
}
.tds-theme--replicant .tds-btn:focus-visible {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
.tds-theme--replicant :is(.tds-btn--secondary, .tds-btn--tertiary) {
  color: var(--tds-color--secondary);
}
.tds-theme--replicant .tds-btn:is(:disabled, .tds--disabled) {
  filter: none;
}
.tds-theme--replicant .tds-btn:is(:focus, .tds--focus) {
  box-shadow: none;
  outline: none;
}
/* While duplicating the line above, they cannot be combined */
.tds--indicate-focus .tds-theme--replicant .tds-btn:focus,
.tds--focus .tds-theme--replicant .tds-btn:focus,
.tds--focus.tds-theme--replicant .tds-btn:focus,
.tds-theme--replicant .tds--focus .tds-btn:focus {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}
/* Override default hover/focus background change */
.tds-theme--replicant .tds-btn--secondary:not([disabled], .tds--disabled):is(:focus, .tds--focus) {
  --tds-btn--background-color: transparent;

  color: var(--tds-color--secondary);
}
.tds-theme--replicant .tds-btn:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
  --tds-btn--background-color: transparent;

  -webkit-animation: tds-flicker--soft 1s forwards;

          animation: tds-flicker--soft 1s forwards;
  filter: var(--tds-glow--bright);
  opacity: 1;
  transition: 0.52s ease 0.48s;
}
.tds-theme--replicant .tds-btn--secondary:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
  color: var(--tds-color--inverse);
}
.tds-theme--replicant .tds-btn::before,
.tds-theme--replicant .tds-btn::after {
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.5s ease;
}
.tds-theme--replicant .tds-btn::before {
  background: var(--tds-color--secondary);
  -webkit-clip-path: var(--tds-notch);
          clip-path: var(--tds-notch);
  z-index: -1;
}
[dir='rtl'] .tds-theme--replicant .tds-btn::before {
  transform: scale(-1, 1);
}
.tds-theme--replicant :is(.tds-btn--secondary, .tds-btn--tertiary)::before {
  background: transparent;
}
.tds-theme--replicant .tds-btn:is(:hover, .tds--hover):not([disabled], .tds--disabled)::before,
.tds-theme--replicant .tds-btn:is(:hover, .tds--hover):not([disabled], .tds--disabled)::after {
  transition: 0.52s ease 0.48s;
}
.tds-theme--replicant .tds-btn--secondary::after {
  background: var(--tds-color--secondary);
  -webkit-clip-path: var(--tds-notch--outline);
          clip-path: var(--tds-notch--outline);
}
[dir='rtl'] .tds-theme--replicant .tds-btn--secondary::after {
  transform: scale(-1, 1);
}
.tds-theme--replicant .tds-btn--secondary:is(:hover, .tds--hover):not([disabled], .tds--disabled)::before {
  background: var(--tds-color--secondary);
}
:where(.tds-theme--replicant) .tds-chip {
  background-color: var(--tds-color--secondary);
  color: var(--tds-color--inverse);
  -webkit-padding-end: var(--tds-size--half);
          padding-inline-end: var(--tds-size--half);
  -webkit-padding-start: var(--tds-size--1x);
          padding-inline-start: var(--tds-size--1x);
}
:where(.tds-theme--replicant) .tds-form-input-wrap .tds-chip {
  background-color: var(--tds-color--secondary);
}
.tds-theme--replicant .tds-form-feedback-wrap {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}
.tds-theme--replicant .tds-form-feedback-helper,
.tds-theme--replicant .tds-form-feedback-feedback {
  --tds-form-feedback--font-weight: var(--tds-font-weight--book);
}
.tds-theme--replicant :is(.tds-fieldset--choice, .tds-fieldset--selector) {
  --tds-fieldset--indent: 0;
  --tds-form-label--color: var(--tds-color--secondary);
}
.tds-theme--replicant :is(.tds-fieldset--choice, .tds-fieldset--selector) .tds-legend {
  --tds-form-label--font-size: var(--tds-font-size--20);

  color: var(--tds-form-label--color);
  font-weight: var(--tds-font-weight--bold);
  letter-spacing: var(--tds-heading--letter-spacing);
  text-transform: var(--tds-heading--text-transform);
}
.tds-theme--replicant .tds-fieldset--selector .tds-legend {
  padding: 0;
}
.tds-theme--replicant .tds-form-label-wrap {
  --tds-form-item--indent: 0;
  --tds-form-label--color: var(--tds-color--secondary);
}
.tds-theme--replicant .tds-form-label-caption {
  --tds-form-item--indent: 0;
}
.tds-theme--replicant .tds-form-label {
  --tds-form-label--font-size: var(--tds-font-size--20);

  letter-spacing: var(--tds-heading--letter-spacing);
  text-transform: var(--tds-heading--text-transform);
}
.tds-theme--replicant .tds-form-item--choice .tds-form-label {
  letter-spacing: 0;
  text-transform: none;
}
.tds-theme--replicant .tds-form-label-text {
  font-weight: var(--tds-font-weight--bold);
}
.tds-theme--replicant .tds-form-item--choice .tds-form-label-text {
  font-weight: var(--tds-font-weight--medium);
}
/* -- Replicant Form Input Overrides
----------------------------------------------------------------------------- */
.tds-theme--replicant .tds-form-input-wrap {
  background: none;
  border: none;
  color: var(--tds-color--secondary);
}
.tds-theme--replicant .tds-form-input-wrap::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--tds-color--secondary);
  -webkit-clip-path: var(--tds-notch--outline-thin);
          clip-path: var(--tds-notch--outline-thin);
  transition: -webkit-clip-path 0.5s ease;
  transition: clip-path 0.5s ease;
  transition: clip-path 0.5s ease, -webkit-clip-path 0.5s ease;
}
.tds-theme--replicant .tds-form-input-wrap:focus-within::before {
  -webkit-clip-path: var(--tds-notch--outline);
          clip-path: var(--tds-notch--outline);
}
.tds-theme--replicant .tds-form-item--error .tds-form-input-wrap::before {
  background-color: var(--tds-color--error);
}
.tds-theme--replicant .tds-form-input {
  color: inherit;
}
.tds-theme--replicant .tds-form-input:-moz-placeholder-shown {
  color: var(--tds-text--color--placeholder);
}
.tds-theme--replicant .tds-form-input:-ms-input-placeholder {
  color: var(--tds-text--color--placeholder);
}
.tds-theme--replicant .tds-form-input:placeholder-shown {
  color: var(--tds-text--color--placeholder);
}
/* Choices (non-wrapped inputs) */
.tds-theme--replicant .tds-form-item--choice .tds-form-input {
  --tds-form-input--border-radius: 0;
  --tds-form-input--check-height: 8px;
  --tds-form-input--height: 14px;
}
/* Replace default microinteraction */
.tds-theme--replicant .tds-form-item--choice .tds-form-input::after {
  --tds-form-input--check-height: 100%;
  --tds-form-input--transform-scale-value: 1.2;

  transform: scale(var(--tds-form-input--transform-scale-value));
  opacity: 0;
  transition: opacity 0.5s ease;
  background-position: 0 0;
  background-size: 100%;
}
.tds-theme--replicant .tds-form-item--choice .tds-form-input[type='radio']::after {
  --tds-form-input--transform-scale-value: 0.6;
}
.tds-theme--replicant .tds-form-item--choice .tds-form-input:checked,
.tds-theme--replicant .tds-form-item--choice .tds-form-input:checked::after {
  -webkit-animation: tds-flicker-on--soft 1s forwards;
          animation: tds-flicker-on--soft 1s forwards;
  opacity: 1;
}
/* Specificity here due to option-group--replicant's use of a * selector to set the color (line 88). */
.tds-theme--replicant .tds-form-item--choice .tds-form-input:checked + * .tds-form-label-text {
  color: var(--tds-color--secondary);
}
[dir='rtl'] .tds-theme--replicant .tds-form-input-wrap::before {
  transform: scale(-1, 1);
}
.tds-theme--replicant .tds-form-item--range {
  --tds-form-item--indent: 0;
  --tds-range-slider--radius: 0;
  --tds-range-slider--thumb-radius: 0;
}
.tds-theme--replicant .tds-form-item--range .tds-form-input-wrap::before {
  display: none;
}
.tds-theme--replicant .tds-form-item {
  --tds-form-item--indent: 10px;
}
.tds-theme--replicant .tds-form-item--choice {
  --tds-form-item--indent: 0;
}
/* -- Link Theme Adjustments
----------------------------------------------------------------------------- */
.tds-theme--replicant .tds-link {
  box-shadow: 0 0.5px 0 0 rgba(187, 187, 187, 0.75);
  transition: color 0.33s ease, box-shadow 0.33s ease;
}
/* Replicant theme only has one link style, so below we set the primary
and secondary modifiers to always apply the same link styling as the default,
unmodified link style.
*/
.tds-theme--replicant .tds-link:is(:hover, .tds--hover):not([disabled], .tds--disabled) {
  --tds-text--color: var(--tds-color--secondary);

  box-shadow: 0 1.5px 0 0 rgba(var(--tds-color--rgb-shade), 1);
  transition: color 0.33s ease, box-shadow 0.33s ease;
}
.tds-theme--replicant .tds-link--primary,
.tds-theme--replicant .tds-link--secondary {
  --tds-text--color: inherit;

  font-weight: var(--tds-font-weight--book, 400);
}
.tds-theme--replicant {
  --tds-modal--full-height: calc(100vh - var(--tds-size--8x));
  --tds-modal--full-width: calc(100vw - var(--tds-size--8x));
}
.tds-theme--replicant .tds-modal {
  background-color: transparent;
  border-radius: 0;
  bottom: auto;
  box-shadow: none;
  color: var(--tds-color--secondary);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.33));
}
.tds-theme--replicant .tds-modal-content {
  overflow: auto;
}
.tds-theme--replicant .tds-modal:not(.tds-modal--sheet-right, .tds-modal--sheet-left) {
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.tds-theme--replicant .tds-modal.tds-modal--sheet-right {
  right: 0;
  top: 0;
  transform: translateX(100%) translateY(0);
}
.tds-theme--replicant .tds-modal.tds-modal--sheet-right.tds-modal[open] {
  transform: translateX(0) translateY(0);
}
.tds-theme--replicant .tds-modal.tds-modal--sheet-left {
  left: 0;
  top: 0;
  transform: translateX(-100%) translateY(0);
}
.tds-theme--replicant .tds-modal.tds-modal--sheet-left.tds-modal[open] {
  transform: translateX(0) translateY(0);
}
.tds-theme--replicant .tds-modal::before,
.tds-theme--replicant .tds-modal::after {
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.tds-theme--replicant .tds-modal::before {
  background-color: var(--tds-color--secondary);
  -webkit-clip-path: var(--tds-notch--outline);
          clip-path: var(--tds-notch--outline);
  opacity: 1;
  transition: 0.5s ease;
}
.tds-theme--replicant .tds-modal::after {
  background-color: var(--tds-dialog--background-color);
  -webkit-clip-path: var(--tds-notch);
          clip-path: var(--tds-notch);
  opacity: 1;
  z-index: -1;
}
.tds-theme--replicant .tds-modal[open]::before {
  -webkit-animation: turn-on-modal-before 1s forwards;
          animation: turn-on-modal-before 1s forwards;
}
/* prettier-ignore */
@-webkit-keyframes turn-on-modal-before {
  0% { opacity: 1; }
  8% { opacity: 0.5; }
  16% { opacity: 1; }
  24% { opacity: 0.5; }
  32% { opacity: 1; }
  40% { opacity: 0.5; }
  48% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes turn-on-modal-before {
  0% { opacity: 1; }
  8% { opacity: 0.5; }
  16% { opacity: 1; }
  24% { opacity: 0.5; }
  32% { opacity: 1; }
  40% { opacity: 0.5; }
  48% { opacity: 1; }
  100% { opacity: 1; }
}
.tds-theme--replicant .tds-modal-header,
.tds-theme--replicant .tds-modal-footer {
  background-color: transparent;
}
@media (max-width: 599px) {
  .tds-theme--replicant .tds-modal {
    inline-size: var(--tds-modal--full-width) !important;
  }

  .tds-theme--replicant .tds-modal--fullscreen {
    block-size: var(--tds-modal--full-height) !important;
  }
}
@media (min-width: 600px) {
  .tds-theme--replicant .tds-modal--fullscreen {
    inline-size: var(--tds-modal--full-width);
    block-size: var(--tds-modal--full-height);
  }

  .tds-modal--fullscreen + .tds-modal-backdrop {
    display: block;
  }
}
.tds-theme--replicant .tds-modal-close {
  background-color: transparent;
  border-radius: 0;
  filter: var(--tds-glow--off);
  transition: 0.5s ease;
}
.tds-theme--replicant .tds-modal-close:hover,
.tds-theme--replicant .tds-modal-close:focus {
  -webkit-animation: tds-flicker--soft 1s forwards;
          animation: tds-flicker--soft 1s forwards;
  filter: var(--tds-glow--bright);
  transition: 0.52s ease 0.48s;
}
.tds-theme--replicant .tds-modal-close-icon {
  block-size: var(--tds-size--2x);
  inline-size: var(--tds-size--2x);
}
[dir='rtl'] .tds-theme--replicant .tds-modal::before {
  transform: scale(-1, 1);
}
[dir='rtl'] .tds-theme--replicant .tds-modal::after {
  transform: scale(-1, 1);
}
/* -- Option Group Theme Adjustments
----------------------------------------------------------------------------- */
:root,
.tds-component-preview {
  --tds-option_group-transform: calc(var(--tds-size--3x) * -1);
  --tds-plus-icon--left: 0;
  --tds-plus-icon--right: auto;
}
[dir='rtl'] {
  --tds-option_group-transform: var(--tds-size--3x);
  --tds-plus-icon--left: auto;
  --tds-plus-icon--right: 0;
}
/* Core Styles */
/* --tds-fading-line is created using --tds-color--rgb-shade,
which is either 0,0,0 or 255,255,255 depending on the scrim color */
[class*='tds-scrim--'] .tds-theme--replicant,
.tds-theme--replicant[class*='tds-scrim--'],
.tds-theme--replicant [class*='tds-scrim--'] {
  --tds-fading-line:
    linear-gradient(
      to right,
      rgba(var(--tds-color--rgb-shade), 1) 0%,
      rgba(var(--tds-color--rgb-shade), 1) 50%,
      rgba(var(--tds-color--rgb-shade), 0.1) 100%
    );
  --tds-fading-line--glow: -2px 0 6px 4px rgba(var(--tds-color--rgb-shade), 0.15);
  --tds-plus-size: 10px;
}
.tds-theme--replicant .tds-legend + .tds-option_group,
.tds-theme--replicant .tds-form-label + .tds-option_group {
  -webkit-margin-before: var(--tds-size--2x);
          margin-block-start: var(--tds-size--2x);
}
.tds-theme--replicant .tds-option_group .tds-option {
  margin: 0;
}
.tds-theme--replicant .tds-option_group .tds-form-label {
  border: none;
  box-shadow: none !important;
  color: var(--tds-text--color);
  font-weight: var(--tds-font-weight--bold);
  letter-spacing: var(--tds-heading--letter-spacing);
  margin: 0;
  min-block-size: var(--tds-size--5x);
  padding: 0;
  text-transform: var(--tds-heading--text-transform);
}
.tds-theme--replicant .tds-option_group .tds-form-input:hover + .tds-form-label,
.tds-theme--replicant .tds-option_group .tds-form-input:focus + .tds-form-label,
.tds-theme--replicant .tds-option_group .tds-form-input:checked + .tds-form-label {
  color: var(--tds-color--secondary);
  font-weight: var(--tds-font-weight--bold);
}
.tds-theme--replicant .tds-option_group--multiselect .tds-option:focus-within .tds-form-label,
.tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label {
  transition: var(--transition-on);
}
/* Glowing underline for each option */
.tds-theme--replicant .tds-option_group .tds-form-label::after,
.tds-theme--replicant .tds-option_group .tds-form-label.tds-label--checkbox::after {
  background: var(--tds-fading-line);
  block-size: 3px;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.15);
  content: '';
  display: block;
  inline-size: 100%;
  -webkit-margin-before: calc(var(--tds-size--1x) - 2px);
          margin-block-start: calc(var(--tds-size--1x) - 2px);
  opacity: 0.33;
  transition: var(--transition-on);
}
[dir='rtl'] .tds-theme--replicant .tds-form-label::after,
[dir='rtl'] .tds-theme--replicant .tds-option_group .tds-form-label.tds-label--checkbox::after {
  transform: scale(-1);
}
.tds-theme--replicant .tds-option:focus-within .tds-form-label::after,
.tds-theme--replicant .tds-form-input:checked + .tds-form-label::after {
  box-shadow: -2px 0 6px 4px rgba(255, 255, 255, 0.15);
  opacity: 1;
}
.tds-theme--replicant .tds-option_group--multiselect:not(.tds-option_group--alternate) .tds-option:focus-within .tds-form-label::after,
.tds-theme--replicant .tds-option_group--multiselect:not(.tds-option_group--alternate) .tds-form-input:checked ~ .tds-form-label::after {
  background: var(--tds-fading-line);
}
.tds-theme--replicant .tds-option_group--multiselect .tds-form-label::before {
  display: none;
}
.tds-theme--replicant .tds-form-label > * {
  transition: var(--transition-off);
}
.tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label > * {
  transition: var(--transition-on);
}
.tds-theme--replicant .tds-option_group .tds-form-label-text,
.tds-theme--replicant .tds-option_group .tds-form-label-caption {
  color: inherit;
  font-size: var(--tds-font-size--20);
  font-weight: inherit;
  margin: 0;
}
/* Override checkbox label styles */
.tds-theme--replicant .tds-option_group--multiselect .tds-form-input ~ .tds-label--checkbox::after {
  -webkit-animation: none;
          animation: none;
  background: var(--tds-fading-line);
  left: inherit;
  position: static;
  top: inherit;
  transform: none;
}
/* Label Text (position is dependent on the +/- size) */
.tds-theme--replicant .tds-option_group--multiselect .tds-form-label-text {
  margin: 0 calc(var(--tds-plus-size) / 2);
  padding: 0 calc(var(--tds-plus-size) * 2);
  position: relative;
  transform: translateX(0);
}
/* Left-align options when no prices are present */
.tds-theme--replicant .tds-form-label .tds-form-label-text:only-child {
  justify-content: flex-start;
}
.tds-theme--replicant .tds-option_group .tds-form-input:checked + .tds-form-label .tds-form-label-text,
.tds-theme--replicant .tds-option_group .tds-form-input:checked + .tds-form-label .tds-form-label-caption {
  color: inherit;
  font-weight: inherit;
}
/* Label +/- Icon */
.tds-theme--replicant .tds-option_group--multiselect .tds-form-label-text::before,
.tds-theme--replicant .tds-option_group--multiselect .tds-form-label-text::after {
  -webkit-animation: turn-off 1s;
          animation: turn-off 1s;
  background: var(--tds-text--color--light);
  block-size: var(--tds-plus-size);
  content: '';
  display: block;
  inline-size: 2px;
  left: var(--tds-plus-icon--left);
  opacity: 1;
  position: absolute;
  right: var(--tds-plus-icon--right);
  top: calc(100% - 1em); /* Center vertically with the text */
  transition: var(--transition-off);
}
.tds-theme--replicant .tds-option_group--multiselect .tds-form-label-text::before {
  transform: rotate(0deg);
}
.tds-theme--replicant .tds-option_group--multiselect .tds-form-label-text::after {
  transform: rotate(-90deg);
}
/* Label +/- Icon: On State */
.tds-theme--replicant .tds-option_group--multiselect .tds-option:focus-within :is(.tds-form-label-text::before, .tds-form-label-text::after),
.tds-theme--replicant .tds-option_group--multiselect .tds-form-label:hover .tds-form-label-text::before,
.tds-theme--replicant .tds-option_group--multiselect .tds-form-label:hover .tds-form-label-text::after,
.tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::before,
.tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::after {
  background: var(--tds-color--secondary);
  transition: var(--transition-on);
}
.tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text {
  -webkit-animation: turn-on 1s;
          animation: turn-on 1s;
  transform: translateX(var(--tds-option_group-transform));
}
.tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::before,
.tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::after {
  opacity: 0;
}
.tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::before {
  -webkit-animation: turn-on-before 1s;
          animation: turn-on-before 1s;
  transform: rotate(-270deg);
}
.tds-theme--replicant .tds-option_group--multiselect .tds-form-input:checked ~ .tds-form-label .tds-form-label-text::after {
  -webkit-animation: turn-on-after 1s;
          animation: turn-on-after 1s;
  transform: rotate(-270deg);
}
@-webkit-keyframes turn-on {
  /* wait till part-way through blinking */
  0% {
    transform: translateX(0);
  }

  48% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(var(--tds-option_group-transform));
  }
}
@keyframes turn-on {
  /* wait till part-way through blinking */
  0% {
    transform: translateX(0);
  }

  48% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(var(--tds-option_group-transform));
  }
}
@-webkit-keyframes turn-on-before {
  /* Blink */
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }

  8% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  24% {
    opacity: 0;
  }

  32% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  /* Move */
  48% {
    opacity: 1;
    transform: rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: rotate(-270deg);
  }
}
@keyframes turn-on-before {
  /* Blink */
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }

  8% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  24% {
    opacity: 0;
  }

  32% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  /* Move */
  48% {
    opacity: 1;
    transform: rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: rotate(-270deg);
  }
}
@-webkit-keyframes turn-on-after {
  /* Blink */
  0% {
    opacity: 1;
    transform: rotate(-90deg);
  }

  8% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  24% {
    opacity: 0;
  }

  32% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  /* Move */
  48% {
    opacity: 1;
    transform: rotate(-90deg);
  }

  100% {
    opacity: 0;
    transform: rotate(-270deg);
  }
}
@keyframes turn-on-after {
  /* Blink */
  0% {
    opacity: 1;
    transform: rotate(-90deg);
  }

  8% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  24% {
    opacity: 0;
  }

  32% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  /* Move */
  48% {
    opacity: 1;
    transform: rotate(-90deg);
  }

  100% {
    opacity: 0;
    transform: rotate(-270deg);
  }
}
@-webkit-keyframes turn-off {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  24% {
    opacity: 1;
  }

  32% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}
@keyframes turn-off {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  24% {
    opacity: 1;
  }

  32% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}
.tds-theme--replicant .tds-progress_bar {
  --progress-border-radius: 1px;
  --progress-height: var(--tds-size--3x);
  --tds-notch--outline-thin__progress:
    polygon(
      0 0,
      100% 0,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      0 100%,
      0 1.5px,
      1.5px 1.5px,
      1.5px calc(100% - 1.5px),
      calc(100% - 9.5px) calc(100% - 1.5px),
      calc(100% - 1.5px) calc(100% - 9.5px),
      calc(100% - 1.5px) 1.5px,
      0 1.5px
    );
  --tds-notch_progress: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  --tds-progress-bar--bar-color: transparent;

  background-color: transparent;
  box-shadow: none;
  padding: 4px;
}
/* TODO Add safaris support */
.tds-theme--replicant .tds-progress_bar-wrapper::before {
  background: var(--tds-color--secondary);
  bottom: 0;

  /* clip-path: var(--tds-notch--outline-thin__progress); Seems to be broken */

  -webkit-clip-path: var(--tds-notch--outline-thin);

          clip-path: var(--tds-notch--outline-thin);
  content: '';
  display: block;
  left: 0;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.5s ease;
}
.tds-theme--replicant .tds-progress_bar::-webkit-progress-value {
  border-radius: 0;
  box-shadow: var(--tds-glow--medium);
  -webkit-clip-path: var(--tds-notch_progress);
          clip-path: var(--tds-notch_progress);
}
.tds-theme--replicant .tds-progress_bar::-webkit-progress-bar {
  box-shadow: none;
}
/* NOTE: moz-progress-bar === -webkit-progress-value */
.tds-progress_bar--primary::-moz-progress-bar {
  border-radius: 0;
  box-shadow: var(--tds-glow--medium);
  clip-path: var(--tds-notch_progress);
}
/* -- Status Message Theme Adjustments
----------------------------------------------------------------------------- */
.tds-theme--replicant .tds-status_msg {
  --tds-card--padding: 0;
}
.tds-theme--replicant .tds-status_msg--enclosed {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  background-color: rgba(128, 128, 128, 0.125);
}
.tds-theme--replicant .tds-status_msg:not(.tds-card--open) .tds-icon {
  --tds-card--padding: 0;
}
.tds-theme--replicant .tds-status_msg .tds-card-body {
  padding: 0;
}
.tds-theme--replicant .tds-status_msg:not(.tds-card--open) .tds-icon + .tds-card-body,
.tds-theme--replicant .tds-status_msg:not(.tds-card--layout-vertical) .tds-icon + .tds-card-body {
  -webkit-padding-start: var(--tds-size--1x);
          padding-inline-start: var(--tds-size--1x);
}
.tds-theme--replicant .tds-switch_toggle {
  --tds-switch_toggle--radius: 0;
}
.tds-theme--replicant .tds-switch_toggle-track::after {
  background-color: var(--tds-toggle--fill-color);
}
.tds-theme--replicant .tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-track {
  background-color: var(--tds-color--white);
}
.tds-theme--replicant .tds-switch_toggle--label_inside .tds-switch_toggle-btn:last-child {
  right: 0;
}
.tds-theme--replicant .tds-switch_toggle--label_inside .tds-switch_toggle-btn:nth-last-child(2) {
  left: 0;
}
.tds-theme--replicant .tds-switch_toggle--label_inside .tds-switch_toggle-checkbox:checked ~ .tds-switch_toggle-btn {
  color: var(--tds-color--inverse);
}
/* -- Text Theme Adjustments
----------------------------------------------------------------------------- */
.tds-theme--replicant,
.tds-theme--replicant .tds-component-preview {
  --tds-heading--text-transform: uppercase;
}
.tds-theme--replicant :is(h1, h2, h3, h4, h5, h6, .tds-text--h1, .tds-text--h2, .tds-text--h3, .tds-text--h4, .tds-text--h5, .tds-text--h6) {
  --tds-heading--letter-spacing: 0.145em;

  font-weight: var(--tds-font-weight--bold);
}
.tds-theme--replicant :is(h1, h2, .tds-text--h1, .tds-text--h2) {
  text-shadow: 0 0 var(--tds-size--1x) rgba(var(--tds-color--rgb-shade), 0.5);
}
.tds-theme--replicant .tds-text--caption {
  --tds-text--color: var(--tds-color--grey55);
}
/* -- Button Theme Adjustments
----------------------------------------------------------------------------- */
.tds-theme--v7 .tds-btn--large {
  --tds-border-radius--pill: var(--tds-size--half);
}
.tds-theme--v7 .tds-btn {
  font-size: var(--tds-font-size--30);
  text-transform: inherit;
}
.tds-theme--v7 .tds-card:not(.tds-card--open) {
  --tds-border-radius--card: var(--tds-size--half);
  --tds-border-radius--card--dense: calc(var(--tds-size--half) / 2);
}
.tds-theme--v7 .tds-date-picker {
  --tds-day-radius: var(--tds-size--half);
  --tds-end-of-week-radius: 0;
}
/* stylelint-disable */
.tds-theme--v7,
.tds-theme--v7 .tds-form-input-wrap,
.tds-theme--v7 .tds-form--input {
  --tds-form-item--indent: 12px;
}
/* Outdents form items by default */
.tds-theme--v7 .tds-form-item,
.tds-theme--v7 .tds-form-feedback-wrap {
  --tds-form-item--indent: 0px;
}
.tds-theme--v7 .tds-form-item--choice [type='checkbox'],
.tds-theme--v7 .tds-form-item--choice [type='checkbox']::after {
  --tds-form-input--border-radius: 2px;
}
.tds-theme--v7 .tds-form-item--range .tds-form-input  {
  --tds-range-slider--thumb-radius: 20px;
}
.tds-theme--v7 .tds-icon-trigger {
  font-size: var(--tds-font-size--30);
  font-weight: var(--tds-font-weight--medium);
}
.tds-theme--v7 .tds-icon-trigger .tds-label-title {
  text-transform: inherit;
}
.tds-theme--v7 .tds-icon-crosshatch {
  border-radius: var(--tds-size--half);
}
.tds-theme--v7 .tds-card:is(.tds-locale-selector-trigger, .tds-locale-selector-country) {
  border-radius: var(--tds-border-radius--card);
}
.tds-theme--v7 .tds-option {
  --tds-form--indent: 20px;
}
.tds-theme--v7 .tds-form-input--circle {
  border-radius: var(--tds-height--pill);
}
.tds-theme--v7 .tds-option_group .tds-label--checkbox::before,
.tds-theme--v7 .tds-option_group .tds-label--checkbox::after {
  border-radius: 2px;
}
.tds-theme--v7 .tds-site-nav-item,
.tds-animate--backdrop-backdrop {
  border-radius: var(--tds-border-radius--pill);
}
.tds-theme--v7 .tds-tabs {
  --tds-tab--border-radius: calc(var(--tds-border-radius--pill) - 2px);
}
/******************************************************************************
 Global Alignment Utilities
******************************************************************************/
/* --- Container Alignment
---------------------------------------------------------------- */
.tds--align_center {
  display: block !important;
  margin: 0 auto !important;
}
.tds--align_start {
  display: block !important;
  -webkit-margin-end: auto !important;
          margin-inline-end: auto !important;
  -webkit-margin-start: 0 !important;
          margin-inline-start: 0 !important;
}
.tds--align_end {
  display: block !important;
  -webkit-margin-end: 0 !important;
          margin-inline-end: 0 !important;
  -webkit-margin-start: auto !important;
          margin-inline-start: auto !important;
}
/**
 * Animated Backdrop
 * - A generic utility that can be used across a variety of components
 * - This is designed to mimic the appearance of a selected state,
 * - but move from one item to the next as the user's selection changes

 Basic HTML Structure

 <parent>
  <div class="tds--animated-backdrop" />

  <item />
  <item />
  <item />
 </parent

 */
.tds--animated-backdrop {
  position: absolute;

  /* Positional data set via js */
  block-size: var(--tds-animate-backdrop-height, 0);
  inline-size: var(--tds-animate-backdrop-width, 0);
  left: var(--tds-animate-backdrop-left, 0);
  top: var(--tds-animate-backdrop-top, 0);

  /* Note: Visibility needs to not have a default value here, otherwise it will override the tokenized value */
  opacity: var(--tds-animate-backdrop-opacity, 0);
  visibility: var(--tds-animate-backdrop-visibility);

  /* z-index: -1; */
  transition: var(--tds-animate-backdrop-transition, opacity 0.5s ease, visibility 0s 0s);
}
/*
 * Pre-Normalization Utils
 * - Kept for backwards compatibility
 * - Todo: Fully convert to normalized versions
 */
:root,
.tds-component-preview {
  --tds-animate-transition-duration--medium: 600ms;
  --tds-animate-transition-duration--short: 500ms;
  --tds-animate-transition-function--base: linear;
  --tds-animate-transition-function--mktg: cubic-bezier(0.165, 0.84, 0.44, 1);
  --tds-animate-transition-property: opacity;
  --tds-animate-transition_duration--long: 1500ms;

  /* Normalized Tokens - TODO: Move tokens to this group as we refactor each animation */
  --tds--fade-in: tds--fade-in 1s ease;
  --tds--pulsing: tds--pulsing 1.5s infinite ease-in-out;
  --tds--rotating: tds--rotating 1.5s infinite linear;
}
.tds-animate--fade_out {
  opacity: var(--tds-opacity--transparent);
  transition:
    var(--tds-animate-transition-property) var(--tds-animate-transition-duration--short)
    var(--tds-animate-transition-function--base);
}
.tds-animate--fade_in {
  opacity: var(--tds-opacity--100);
  transition:
    var(--tds-animate-transition-property) var(--tds-animate-transition-duration--short)
    var(--tds-animate-transition-function--base);
}
.tds-animate_small--to_reveal {
  z-index: -1;
  opacity: var(--tds-opacity--transparent);
  transform: translate3d(0, 30px, 0);
  transition:
    transform var(--tds-animate-transition-duration--short)
    var(--tds-animate-transition-function--mktg),
    opacity var(--tds-animate-transition-duration--short)
    var(--tds-animate-transition-function--mktg);
}
.tds-animate_small--reveal .tds-animate_small--to_reveal {
  opacity: var(--tds-opacity--100);
  transform: translate3d(0, 0, 0);
  z-index: initial;
}
.tds-animate_large--to_reveal {
  opacity: var(--tds-opacity--transparent);
  transform: translate3d(0, 100px, 0);
  z-index: -1;
}
.tds-animate_large--revealed {
  z-index: initial;
  opacity: var(--tds-opacity--100);
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--tds-animate-transition_duration--long)
    var(--tds-animate-transition-function--mktg),
    opacity var(--tds-animate-transition_duration--long)
    var(--tds-animate-transition-function--mktg);
}
.tds-animate--squish {
  transition: translate 0.1s ease;
}
.tds-animate--bounce {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: tds-keyframe--bounce;
          animation-name: tds-keyframe--bounce;
}
@-webkit-keyframes tds-keyframe--fade_out {
  0% {
    opacity: var(--tds-opacity--100);
  }

  100% {
    opacity: var(--tds-opacity--transparent);
  }
}
@keyframes tds-keyframe--fade_out {
  0% {
    opacity: var(--tds-opacity--100);
  }

  100% {
    opacity: var(--tds-opacity--transparent);
  }
}
@-webkit-keyframes tds-keyframe--fade_in {
  0% {
    opacity: var(--tds-opacity--transparent);
  }

  100% {
    opacity: var(--tds-opacity--100);
  }
}
@keyframes tds-keyframe--fade_in {
  0% {
    opacity: var(--tds-opacity--transparent);
  }

  100% {
    opacity: var(--tds-opacity--100);
  }
}
@-webkit-keyframes tds-keyframe--make_smaller {
  0% {
    max-block-size: 100vh;
    opacity: var(--tds-opacity--100);
  }

  100% {
    max-block-size: 0;
    opacity: var(--tds-opacity--transparent);
  }
}
@keyframes tds-keyframe--make_smaller {
  0% {
    max-block-size: 100vh;
    opacity: var(--tds-opacity--100);
  }

  100% {
    max-block-size: 0;
    opacity: var(--tds-opacity--transparent);
  }
}
@-webkit-keyframes tds-keyframe--make_larger {
  0% {
    max-block-size: 0;
    opacity: var(--tds-opacity--transparent);
  }

  100% {
    max-block-size: 100vh;
    opacity: var(--tds-opacity--100);
  }
}
@keyframes tds-keyframe--make_larger {
  0% {
    max-block-size: 0;
    opacity: var(--tds-opacity--transparent);
  }

  100% {
    max-block-size: 100vh;
    opacity: var(--tds-opacity--100);
  }
}
@-webkit-keyframes tds-keyframe--bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(5px);
  }

  60% {
    transform: translateY(3px);
  }
}
@keyframes tds-keyframe--bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(5px);
  }

  60% {
    transform: translateY(3px);
  }
}
/**
 * Normalized Animation Utils
 */
.tds--fade-in {
  -webkit-animation: var(--tds--fade-in);
          animation: var(--tds--fade-in);
}
@-webkit-keyframes tds--fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes tds--fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
/* TODO:
 * Distinct motion vs fade handling for prefers-reduced-motion
 * https://issues.teslamotors.com/browse/AWSM-3770
 */
.tds--rotating {
  -webkit-animation: var(--tds--rotating);
          animation: var(--tds--rotating);
}
@-webkit-keyframes tds--rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
@keyframes tds--rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.tds--pulsing {
  -webkit-animation: var(--tds--pulsing);
          animation: var(--tds--pulsing);
}
@-webkit-keyframes tds--pulsing {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
  }
}
@keyframes tds--pulsing {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
  }
}
/******************************************************************************
 Global Column Utilites
******************************************************************************/
.tds-columns {
  -moz-column-gap: 20px;
       column-gap: 20px;
  -moz-column-width: auto;
       column-width: auto;
  display: block;
}
.tds-columns--two {
  -moz-column-count: 2;
       column-count: 2;
}
.tds-columns--three {
  -moz-column-count: 3;
       column-count: 3;
}
/* Desktop modifiers for screens larger than 840px */
@media (min-width: 600px) {
  .tds-columns--two_on_desktop {
    -moz-column-count: 2;
         column-count: 2;
  }

  .tds-columns--three_on_desktop {
    -moz-column-count: 3;
         column-count: 3;
  }
}
:root,
.tds-component-preview,
[lang*='en'],
html[lang*='en'],
[lang*='en'] body {
  --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family) !important;

  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
}
[lang='ar-AE'],
html[lang='ar-AE'],
[lang='ar-AE'] body {
  --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--arabic), var(--tds-font-family) !important;

  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
}
[lang='he-IL'],
html[lang='he-IL'],
[lang='he-IL'] body {
  --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--hebrew), var(--tds-font-family) !important;

  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
}
[lang='th-TH'],
html[lang='th-TH'],
[lang='th-TH'] body {
  --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--thai), var(--tds-font-family) !important;

  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
}
[lang='ko-KR'],
html[lang='ko-KR'],
[lang='ko-KR'] body {
  --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--korean), var(--tds-font-family) !important;

  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
}
[lang='ja-JP'],
html[lang='ja-JP'],
[lang='ja-JP'] body {
  --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--japanese), var(--tds-font-family) !important;

  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
}
[lang='zh-CN'],
html[lang='zh-CN'],
[lang='zh-CN'] body {
  --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--chinese-simplified), var(--tds-font-family) !important;

  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
}
[lang='zh-HK'],
html[lang='zh-HK'],
[lang='zh-HK'] body {
  --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--chinese-hk), var(--tds-font-family) !important;

  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
}
:is([lang='zh-MO'], [lang='zh-TW']),
html:is([lang='zh-MO'], [lang='zh-TW']),
:is([lang='zh-MO'], [lang='zh-TW']) body {
  --tds-font-family--combined: var(--tds-font-family--latin), var(--tds-font-family--chinese-traditional), var(--tds-font-family) !important;

  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
}
.tds--prevent-scroll {
  overflow: hidden;
}
.tds--product-name {
  white-space: nowrap;
}
.tds-fullscreen-ios {
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}
/******************************************************************************
 Global Padding Utilites
******************************************************************************/
.tds--padding--small {
  padding: var(--tds-size--1x) !important;
}
.tds--padding {
  padding: var(--tds-size--2x) !important;
}
.tds--padding--large {
  padding: var(--tds-size--3x) !important;
}
/* Remove Horizontal Padding */
.tds--no_horizontal_padding {
  -webkit-padding-end: 0 !important;
          padding-inline-end: 0 !important;
  -webkit-padding-start: 0 !important;
          padding-inline-start: 0 !important;
}
.tds--no_vertical_padding {
  -webkit-padding-after: 0 !important;
          padding-block-end: 0 !important;
  -webkit-padding-before: 0 !important;
          padding-block-start: 0 !important;
}
.tds--no_padding {
  padding: 0 !important;
}
.tds--horizontal_padding--small {
  -webkit-padding-end: var(--tds-size--1x) !important;
          padding-inline-end: var(--tds-size--1x) !important;
  -webkit-padding-start: var(--tds-size--1x) !important;
          padding-inline-start: var(--tds-size--1x) !important;
}
.tds--horizontal_padding {
  -webkit-padding-end: var(--tds-size--2x) !important;
          padding-inline-end: var(--tds-size--2x) !important;
  -webkit-padding-start: var(--tds-size--2x) !important;
          padding-inline-start: var(--tds-size--2x) !important;
}
.tds--horizontal_padding--large {
  -webkit-padding-end: var(--tds-size--3x) !important;
          padding-inline-end: var(--tds-size--3x) !important;
  -webkit-padding-start: var(--tds-size--3x) !important;
          padding-inline-start: var(--tds-size--3x) !important;
}
.tds--vertical_padding--small {
  -webkit-padding-after: var(--tds-size--1x) !important;
          padding-block-end: var(--tds-size--1x) !important;
  -webkit-padding-before: var(--tds-size--1x) !important;
          padding-block-start: var(--tds-size--1x) !important;
}
.tds--vertical_padding {
  -webkit-padding-after: var(--tds-size--2x) !important;
          padding-block-end: var(--tds-size--2x) !important;
  -webkit-padding-before: var(--tds-size--2x) !important;
          padding-block-start: var(--tds-size--2x) !important;
}
.tds--vertical_padding--large {
  -webkit-padding-after: var(--tds-size--3x) !important;
          padding-block-end: var(--tds-size--3x) !important;
  -webkit-padding-before: var(--tds-size--3x) !important;
          padding-block-start: var(--tds-size--3x) !important;
}
@media (max-width: 599px) {
  .tds--gutterless_on_small {
    -webkit-padding-start: 0 !important;
            padding-inline-start: 0 !important;
    -webkit-padding-end: 0 !important;
            padding-inline-end: 0 !important;
  }
}
.tds-sticky--top,
.tds-sticky--left {
  margin: 0;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
}
.tds-sticky--top {
  top: -1px;
}
.tds-sticky--left {
  left: -1px;
}
/******************************************************************************
 Global Visibility Utilites
******************************************************************************/
/* Hide something from view and from assistive devices */
.tds--is_hidden {
  display: none !important;
}
/* Hide something visually, but still accessible for assistive devices */
.tds--is_visually_hidden:not(:focus):not(:active) {
  block-size: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}
/* Show a previously `visibility: hidden;` element */
.tds--is_visible {
  visibility: visible;
}
/* Inverse of the above. Hide something visually, but leave space for the element in the browser  */
.tds--is_invisible {
  visibility: hidden;
}
/* HideOn Classes: 1:1 Map to TDS Breakpoints -- release in Q3 */
@media (max-width: 599px) {
  .tds--hideon-phone-only {
    display: none !important;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .tds--hideon-tablet-portrait-only {
    display: none !important;
  }
}
@media (min-width: 600px) {
  .tds--hideon-tablet-portrait-up {
    display: none !important;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .tds--hideon-tablet-landscape-only {
    display: none !important;
  }
}
@media (min-width: 900px) {
  .tds--hideon-tablet-landscape-up {
    display: none !important;
  }
}
@media (min-width: 1200px) and (max-width: 1799px) {
  .tds--hideon-desktop-only {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .tds--hideon-desktop-up {
    display: none !important;
  }
}
@media (min-width: 1800px) {
  .tds--hideon-desktop-large-up {
    display: none !important;
  }
}